由于另一个按钮的单击处理程序发生更改，一个按钮的单击处理程序停止工作

Question

更新：这是一个丢失的)，我已经在下面的 cmets 中指明了位置

我有一个页面，其中包含一个 ID 为 #createButton 的按钮和几个类为 .testButton 的按钮。

我有一个#createButton 的点击处理程序和另一个.testButton 的点击处理程序。

由于某种原因，当我将代码块添加到 #createButton 的单击处理程序时，.testButton 的单击处理程序停止工作。我在下面用 cmets 指明了具体的代码块。

为什么一个按钮的点击处理程序由于另一种类型按钮的点击处理程序发生变化而停止工作？

$(document).on('click','#createButton',function(e){

    if(invalidated == 0 && filledEmbeds > 0){           

        //this code block is causing the problem
        $('.embedContainer').each(function(i, obj) {

        } //Update I was missing a closing paranthesis ) here.

        //some code

    }

    e.preventDefault();
});


$(document).on('click','.testButton',function(e){

        //some code

        e.preventDefault();
});

更新：在下面添加 HTML：

<div id='embedContainer1' class='embedContainer'>
<textarea name='textareaName[]' id='textareaEmbed1' class='textareaEmbed'></textarea >
</div>
<button class='button testButton' id='testButton1'>Test code</button>


<div class='row item'>
<input type="submit" class="button" value="Create" id="createButton">
</div>

Answer 1

在“每个”操作之后，您错过了关闭 );。 我刚刚添加了一个警报以确保这些处理程序被启动

$(document).on('click','#createButton',function(e){
        alert("A");
    if(invalidated == 0 && filledEmbeds > 0){           

        //this code block is causing the problem
        $('.embedContainer').each(function(i, obj) {

        });

        //some code

    }

    e.preventDefault();
});


$(document).on('click','.testButton',function(e){
                alert("B");
        //some code

        e.preventDefault();
});

添加fiddle

Answer 2

我会说您应该使用标准选择器并添加 onClick 回调。

$('#id').on('click', function(){});

这种做法是这样的：

$(document).on('click','.testButton',function(e){});

您正在绑定到document 元素。当您再次注册它时，它将简单地覆盖document elment 上的第一个事件处理程序。