Question

我正在使用JQuery的.Append（）方法将按钮附加到无序列表，并且由于某种原因，附加按钮在单击时不会调用其功能。我使用HTML插入了相同的按钮，它工作正常，但由于某种原因，附加按钮将不会运行。有没有办法让他们工作，或者我只是需要解决它？

    $("#requestDisplay").append(<button class='requestRemovalButton'>" + "Remove Request" + "</button>);

HTML中的VS

    <button class="requestRemovalButton">Remove Request</button>

后者将运行该函数，但前者不起作用，这是我用来测试按钮的函数。

    $(".requestRemovalButton").on( "click", remove);

    function remove() {
        alert( "The request is being removed, please wait." );
    }

感谢你提出任何建议。

Answer 1

由于按钮是动态添加的，您需要使用event delegation注册事件处理程序，如： -

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#requestDisplay').on('click', '.requestRemovalButton', function(event) {
    event.preventDefault();
    alert( "The request is being removed, please wait." );
});

Answer 2

我倾向于使用事件处理程序创建适当的元素：

var button = $('<button />', {
    'class' : 'requestRemovalButton',
    text    : 'Remove Request',
    on      : {
           click: remove
    }
});

$("#requestDisplay").append(button);

并且按钮位于表单内，您必须阻止提交该表单的默认操作：

function remove(e) {
    e.preventDefault();
    alert( "The request is being removed, please wait." );
}

附加<按钮>无法运行JQuery </button>

2 个答案: