jquery - 升级到 jquery 1.10.2 后，click 事件不会触发

Question

我刚刚从 jquery 1.5.2 升级到 1.10.2。 我将所有 .live() 调用更改为 .on()。但由于某种原因，一个特定的按钮不再起作用。 逻辑如下:

$("#add_to_rule").on("click", function()   {            
        console.log('inside add');
        //only add if no validation errors.
        if  ( ($('#contact_details').val().length == 0) ) {
            $('#validation_error').html("There is no information to add");
            return false;
        }
        var emess = $("#validation_error").text();
        if ( emess.length == 0 )  { 
                add_routing_entry();            
                update_call_routing_tag();      
        }
    });

它永远不会在控制台中打印“inside add”消息。 在控制台窗口中，我进行了测试以确保该元素存在并返回正确的值。以下是我在控制台内测试的一些结果:

$('#add_to_rule').val();
"Add to Rule"
$('#add_to_rule').on("click");
<input id=​"add_to_rule" type=​"button" class=​"submit" value=​"Add to Rule">​

我还尝试从控制台窗口更改按钮上的值作为测试，如下所示:

$('#add_to_rule').val("test");
[
<input id=​"add_to_rule" type=​"button" class=​"submit" value=​"test">​
]

它确实更新了我按钮上的文本。

最后，为了它的值(value)，我通过添加以下行转储了它所获取的 jquery 库的版本:

console.log(jQuery.fn.jquery);

它打印 1.10.2。

任何关于我可能做错的事情的建议将不胜感激。 谢谢。

Answer 1

将其绑定(bind)到最近的静态父元素，对动态添加的元素使用像这样的事件委托(delegate):

$(document).on("click","#add_to_rule", function()   {