在ajax调用中创建的按钮行为不同于标准html

问题描述：

我试图创建一个表，由ajax查询填充，其中每行都有一个删除按钮旁边，因此它可以很容易地删除。在ajax调用中创建的按钮行为不同于标准html

但是，如果我尝试在ajax查询内部构建按钮，它似乎不能正确发布。为了确保它不是jQuery的点击里面我创造了这个简单的功能

$('.delbutt').on("click", function(event) { 
    var confirm = window.alert("good button pressing skills!"); 
    return false; 
});

阿贾克斯查询和格填表格是由该处理的代码：

(function ajaxMapCalls() { 
    $.ajax({ 
     url: mapgrabber, 
     dataType: 'json', 
     success: function(data, textStatus, xhr) { 
      $("#vcmaps").empty(); 
      var output1 = "<table><tr><th>Customer</th><th>vCenter</th><th>Cluster</th><th>vSwitch</th><th></th></tr>" 

      $(data).each(function(i, el) { 

       var output2 = "<tr><td>" + el.customer + "</td><td>" + el.vcenter + "</td><td>" + el.cluster + "</td><td>" + el.vswitch + "</td><td><button class='delbutt'>delete</button></td></tr>"; 

       output1 += output2; 
      }); 
      $("#vcmaps").append(output1 + "</table>"); 
     } 
    }); 
    setTimeout(ajaxMapCalls, 2000) 
})();

表按钮那里所有的构建都很好，但按钮并没有像预期的那样工作，没有简单的jquery弹出窗口，它似乎试图发布服务器端，它现在不应该这样做。

所以我试图把html的副本放在html里面。

下面

<form action="#" method="POST" id="custVCassign"><div id="vcMenu" 
class="flip"><h3>Assignment</h3></div> 
<div class="panel"> 
Customer: <select class="select" id="custbag"></select><br> 
vCenter: <select class="select" id="vCenter"></select><br> 
Cluster: <select class="select" id="vCluster"></select><br> 
Distributed switch: <select class="select" id="vSwitch"></select><br> 
<button id="custvcdel" class="button2">Delete Cluster and Switch</button> 
<button id="custvc" class="button">Add Cluster and Switch</button><br> 
<button class='delbutt'>delete</button></form> 
<div id="vcmaps"></div> 
</div></form>

中HTML按钮的相关部分的HTML适用精绝，它的警报，但阿贾克斯进格“vcmaps”产生的任何按钮不能正常运行。

我怀疑这是因为它是一个div futher下来，它被更改为传统的后动作，所以我裹在另一种形式的股利..

<form action="#" method="POST" id="custVCen"><div id="vcmaps"></div></form>

还是一样。

任何想法这里发生了什么？

500错误意味着服务器出了问题，而不是你的JS代码。 –

在这一点上，它甚至不应该试图触摸服务器。这就是为什么我认为它是切换后的模式，这将导致500.我问如何停止切换到一个完整的职位，或者即使这就是它。 –

更有用的是，将按钮放在查询内而不是外部会有什么不同，导致它试图与服务器交谈而不是仅仅执行警报？ –

答

您的“单击”事件处理程序不会捕获通过ajax调用动态创建的按钮。当事件处理程序被调用时它们不存在，所以它忽略它们。由于您没有为动态按钮指定type="button"属性，因此它们默认为type="submit"，如果该按钮位于表单内，则会在点击时使用完整回发提交表单（并且没有点击处理程序来覆盖此）。

使用委托事件处理来解决这个问题。您可以在调用事件处理程序时确定存在的元素上设置事件，然后告诉它将事件委派给在事件触发时与辅助选择器相匹配的任何元素。我不知道是什么因素将是你按键的最低共同祖先，所以我只是用document为例：

$(document).on("click", '.delbutt', function(event) {

请参阅“直接和委托的事件”一节在这里：http://api.jquery.com/on/了解更多详情。

其次，使用preventDefault()确保没有按钮触发的次回发。把：

event.preventDefault();

作为你的“点击”处理程序的第一行。有关更多信息，请参阅https://api.jquery.com/event.preventdefault/。这比将return false;放在函数末尾更可靠，因为这意味着事件触发和预设默认之间没有潜在的时间差。

谢谢，我有它的工作。这现在完全有意义。当然，它在启动时不存在。 –

在ajax调用中创建的按钮行为不同于标准html

相关推荐