jquery - 通过单击最后一个元素在最后一个元素之后追加

Question

我有两种形式:一种是事件的(不透明度 1)，另一种是非事件的(不透明度 0.5 应用于 form:last-child)。单击非事件表单使其变为事件状态，并在其后创建另一个非事件表单。

总而言之，我无法通过单击最后一个元素在最后一个元素后 append html。 jQuery 不断选择相同的元素，而不是使用新的最后一个元素。

HTML:

<form class="traveler traveler1">
    <h3>Traveler #1</h3>
    <input type="text" placeholder="First name">
    <input type="text" placeholder="Last name">
    <input type="text" placeholder="Birth date">
    <input type="text" placeholder="Passport number">
</form>
   <form class="traveler traveler2">
    <h3>Traveler #2</h3>
    <input type="text" placeholder="First name">
    <input type="text" placeholder="Last name">
    <input type="text" placeholder="Birth date">
    <input type="text" placeholder="Passport number">
</form>

jQuery:

$(function(){
    function addTraveler(){
        $number = $('.traveler').length;
        $number++;
        $('form.traveler').last().after('<form class="traveler traveler' + $number + '"><h3>Traveler #' + $number + '</h3><input type="text" placeholder="First name"><input type="text" placeholder="Last name"><input type="text" placeholder="Birth date"><input type="text" placeholder="Passport number"></form>');
    }

    $('.traveler').last().on('click', function(){
        $('form.traveler').last().after(addTraveler);
    });
})

我可以通过单击第二个表单(这是旧的最后一个表单)来创建新表单，但当我单击新的最后一个表单时，它不起作用。

我已经尝试了几个小时了，非常感谢任何帮助:)

Answer 1

您需要将点击事件委托(delegate)给动态创建的元素

<强> LIVE DEMO

假设您的所有表单都在#container内

$('#container').on('click', ".traveler:last", addTraveler);

您不需要再次使用 .after()，因为您的 addTraveler 函数已经为您完成了所有这些工作。

关于.on()方法事件委托(delegate)你可以准备更多here (直接事件和委托(delegate)事件)