单击方法没有'；t处理<；a>；已经用以前的方法制作了 - jQuery .click method doesn't work on <a> that was already made by previous method

jQuery .click method doesn't work on <a> that was already made by previous method

本文关键字：方法处理单击 lt gt | 更新日期: 2023-09-26

HTML:

<div id="ajax_search_add_button_div">
    <a id="ajax_search_add_button" style="cursor: pointer;">Add</a>
</div>
<div id="ajax_search_added_items">
    Selected Items:
    <table>
        <tr>
            <td>Nr.</td>
            <td>Item Name</td>
            <td>Amount</td>
            <td></td>
        </tr>
    </table>
</div>

Javascript 1

$("#ajax_search_add_button").click(function() {
    $("#ajax_search_added_items table").append('<tr><td>1</td><td>2</td><td>3</td><td><a id="ajax_search_remove_button" style="cursor: pointer;">remove</a></td></tr>');
});

Javascript 2

$("#ajax_search_remove_button").click(function() {
    $(this).closest("tr").remove();
});

为什么当我按下"删除"按钮时什么都没发生？当我点击"添加"按钮时，"Javascript 1"方法会启动，但当我点击"删除"按钮时，"Javascript 2"方法不会启动。

对新创建的元素使用事件委派。

$(document).on("click","#ajax_search_remove_button",function() {
    $(this).closest("tr").remove();
});

您需要为动态创建的元素进行事件委派。所以使用.on()和click:

$(document).on('click',"#ajax_search_remove_button",function() {
     $(this).closest("tr").remove();
});

使用.on((

因为您的元素是动态添加的，所以在DOM就绪或页面加载时不存在。

所以你必须使用事件委派

语法

$( elements ).on( events, selector, data, handler );

像这个

$(document).on('click','#ajax_search_remove_button',function(){
    $(this).closest("tr").remove();
});

或更好的

$('parentElementPresesntAtDOMready').on('click','#ajax_search_remove_button',function(){
   // code here
});

$('#ajax_search_added_items').on('click','#ajax_search_remove_button',function(){
    $(this).closest("tr").remove();
});