我正在尝试创建一个由ajax查询填充的表,其中每行旁边都有一个删除按钮,因此可以轻松将其删除。
但是,如果我尝试在ajax查询中构建按钮,则似乎无法正确发布。
为了确保它不是jQuery中的代码,请单击我创建的这个简单函数
$('.delbutt').on("click", function(event) {
var confirm = window.alert("good button pressing skills!");
return false;
});
ajax查询和div表填充是通过以下方式处理的:
(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弹出窗口,并且它似乎试图发布服务器端此时不应执行的操作。
因此,我尝试将buttin的副本放入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内的按钮绝对可以正常工作,可以发出警报,但是ajax生成的到div“ vcmaps”中的任何按钮均无法正常运行。
我想知道是否是因为它是一个进一步的div,并且它正在更改为传统的后期操作,所以我将div用另一种形式包装。
<form action="#" method="POST" id="custVCen"><div id="vcmaps"></div></form>
还是一样。
有什么想法吗?
最佳答案
您的“ click”事件处理程序将不会捕获由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;
更为可靠,因为这意味着事件触发与防止默认值之间没有时间间隔。