Question

我正在制作一个编辑按钮，弹出一个带有表单的模态框来编辑它。然后jQuery将此表单发送到我的服务器，然后我得到一个JSON响应。但是，由于我的冒泡问题，如果我点击，例如，所有编辑按钮，然后点击最后一个并更改一个字段，它会在所有这些按钮上完成。

$('.edit').click(function(event){
 //more code...
    modal_submit(the_id);
    event.stopPropagation();
});

然后提交事件：

function modal_submit(the_id){
$('#modal form').submit(function(){
    //This will alert every time I have EVER clicked on an edit button
    alert(the_id);
    return false;
});

}

最后所有这些都在getScript中：

$.getScript('js/edit.js',function(){
create_edit_btn();

}）;

我只用过其他1次，但是它起作用，但我也必须这样做..event.stopPropagation，但是如果我现在做“这个”它说这个事件是未定义的，但就像我说的那样，这个确切的代码之前用于我做过的另一个脚本。

有没有人有任何想法？：\

编辑：

the html is: 
<li> 
  <input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">  
    <p>Hosting for your web site</p>
</li>

Answer 1

事件可以有多个事件侦听器。每次使用$（element）.submit（whateverFunction）时，都会向submit事件添加另一个whateverFunction。如果您只想让最后一个侦听器成为调用该事件时所采取的操作，请尝试执行以下操作：

function modal_submit(the_id){

$('#modal form').unbind(); // this will remove all other event listeners from this element

$('#modal form').submit(function(){
        //This will alert every time I have EVER clicked on an edit button
        alert(the_id);
        return false;
});

Answer 2

我认为你们event.stoppropagation已经完成了它的工作。它停止了按钮点击事件的所有冒泡（即，如果您尝试检查文档正文，它将不再有鼠标单击事件）。表单提交中的代码仍然执行的原因是因为按钮的默认操作会调用它。

与event.stoppropagation（）一起，我建议你包含这个：

event.preventDefault();

这样就不会使用默认操作，只会执行处理程序中的代码。

Answer 3

这是否在创建编辑按钮的功能中？

$('.edit').click(function(event){
 //more code...
        modal_submit(the_id);
        event.stopPropagation();
});

如果是这样，那么它会多次将这个处理程序添加到相同的元素中，从而导致一连串的警报。使用live，它将把处理程序放在每个匹配的元素上，即使稍后在执行时添加了它。

jQuery / JavaScript冒泡和stopPropagation不起作用

3 个答案: