Question

我有以下jquery代码为表中的每一行创建一个按钮：

    $("#add_to_rule").click(function(){
        var contact_type=$("#contact_types option:selected").val();
        var email_address = $('#email_address').val();
        var call_order = $('#call_order').val();

        var htmlstring = '<tr>'
        htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"/></td>'
        htmlstring = htmlstring + '<td>' + contact_type + '</td>'
        htmlstring = htmlstring + '<td>' + email_address + '</td>'
        htmlstring = htmlstring + '<td>' + call_order + '</td>'
        htmlstring = htmlstring + '</tr>'
        $('#rule_summary tr:last').after(htmlstring);
    });

然后，我还有一些jquery来处理删除按钮的.click事件：

    $(".removeruleset").click(function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

向我的表添加行的代码以及删除按钮的工作原理。但是，当我单击其中一个删除按钮时，它不会触发click事件。

作为测试，我在jquery之外创建了一个这样的按钮：

<input type="button" class="removeruleset" value="push me">

它触发点击事件没问题。你能告诉我哪里出错了吗？

谢谢。

编辑1

我尝试将代码更改为：

       $(document).on("click", ".removeruleset", function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

但是这给了我以下错误：

SCRIPT438：对象不支持属性或方法'on'

我正在使用1.5.2版。

所以，我提到了一些评论中提到的文章（Event binding on dynamically created elements?）并试了一下：

    $("body").delegate("click", ".removeruleset", function(e){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

摆脱了错误消息，但仍未触发事件处理程序还尝试过：

    $("body").on("click", ".removeruleset", function(e){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

感谢。

Answer 1

试试这个： -

$(document).on("click", ".removeruleset", function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

将事件添加到元素时，它不存在。要完成这项工作，您需要使用事件委派。

Answer 2

另一种方法是执行此操作htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"click=\"myhandler\"/></td>'

其中myhandler是一个函数

function myhandler(){
 alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
}

Answer 3

你可以试试这个动态控制。

$('#id').live('click', function() {

   ----your code--

})

否则你可以试试这个：

>>>$(document).on('click','#id', function() {

   -----your code ---

   })

通过jquery创建的按钮不会触发.click事件

3 个答案: