Question

好的，我在这里遇到两个问题。首先，我将向您展示HTML。

<div id="servicesAvailable">
    <div>
        <input type="text" name="servicesAvailable[]">
        <i class="fa fa-plus-circle"></i>     
        <span>Add another service</span>
    </div>
</div>

好的，所以我希望用户能够点击＆＃39; .fa-plus-circle＆＃39;在#servicesAvailable中添加另一个div的类。

所以我这样做了:(我知道人们会说为什么不写$（而不是jQuery（），但它很好）。

jQuery('fa-plus-circle').click(function(){
    jQuery('#servicesAvailable').append(
        '<div>
             <input type="text" name="servicesAvailable[]" onclick="addServices(this)">
             <i class="fa fa-plus-circle"></i>
             <span> Add another service</span>
        </div>'
    );
    jQuery(this).next().hide();
    jQuery(this).hide();

});

好的，这样它应该可以正常工作。它实际上是我第一次点击课程。然后，当我点击新附加部分上的fa-plus-circle类时，它不会做任何事情。即使我把console.log（＆＃39; here＆＃39;）;在jQuery点击功能里面它没有记录。

所以，如果有人可以指出我做错了什么，那么很棒！。

但是我现在已经尝试改变我这样做的方式来使其工作，这导致标题问题＆＃39;如何通过onclick发送=＆＃34;功能（这个）＆＃34;＆＃ 39;

<div id="servicesAvailable">
    <div>
        <input type="text" name="servicesAvailable[]">
        <i class="fa fa-plus-circle" onclick="addServices(this)"></i>     
        <span>Add another service</span>
    </div>
</div>

        function addServices(this)
        {
            jQuery('#servicesAvailable').append(
                '<div>
                     <input type="text" name="servicesAvailable[]" onclick="addServices(this)">
                     <i class="fa fa-plus-circle"></i>
                     <span> Add another service</span>
                 </div>'
            );
            this.next().hide();
            this.hide();
        }

现在直接在控制台中，我做任何事情都是

Uncaught SyntaxError: Unexpected token this
function addServices(this)

任何人都可以告诉我在这两种情况下做错了吗？

我承认我不是第二种方式的100％，但我非常确定第一次尝试应该有效。

Answer 1

错误是语法错误 Uncaught SyntaxError: Unexpected token this。

您的字符串未在同一行中完成。对于多行字符串，请在行尾使用\

function addServices(el) {
    jQuery('#servicesAvailable').append(
        '<div>\
            <input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
            <i class="fa fa-plus-circle"></i>\
            <span> Add another service</span>\
        </div>'
    );
    jQuery(el).hide().next().hide();
}

Answer 2

这是您的工作代码：

$('#servicesAvailable').on("click", ".fa-plus-circle",function () {
    $('#servicesAvailable').append('<div>\
     <input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
     <i class="fa fa-plus-circle">click to add</i>\
     <span> Add another service</span>\
</div>');
    jQuery(this).next().hide();
    jQuery(this).hide();

});

Here is the JSFiddle demo

Answer 3

事件仅绑定到现有元素，而不是动态添加的元素。要使用动态添加的元素绑定事件，您需要更新

jQuery('fa-plus-circle').click(function(){

到

jQuery("#servicesAvailable").on("click", "fa-plus-circle", function(){

供参考 - http://api.jquery.com/on/

如何发送onclick =＆＃34;功能（这）＆＃34;

3 个答案: