Question

我有两种形式：一种是活动的（不透明度1）而另一种是非活动的（不透明度0.5应用于形式：last-child）。单击非活动表单使其变为活动状态并在其后创建另一个非活动表单。

总结一下，我在点击最后一个元素后，在我的最后一个元素后添加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

您需要将click事件委托给动态创建的元素

<强> LIVE DEMO

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

中

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

您无需再次使用.after()，因为您的addTraveler功能已为您完成所有这些功能。

关于.on()方法事件委派，您可以准备更多here（直接和委派活动）

通过单击最后一个元素追加到最后一个元素之后

1 个答案: