Question

我基本上有两种dinamicalle创建的删除按钮。他们在不同的对象上执行类似的操作。

所以我需要在每个删除按钮上绑定'click'，然后（点击按钮）让它运行相同的功能。我到目前为止的代码是：

//remove the list item

jQuery("#a").on( 'click', '.remove-button', removeFromList() );
jQuery("#b").on( 'click', '.remove-button', removeFromList() );

function removeFromList() {

console.log("i'm inside the remove function");
    var name;

    if( jQuery(this).hasClass("kruiden") ){
        name = myPlantList;
        console.log(name + "i'm inside the kruiden remove function");

    } else if( jQuery(this).hasClass("recept") ){
        name = myReceptenList;
        console.log(name + "i'm inside the recepten remove function");
    }

        //define the div element which contains the item to be deleted
        var div = jQuery(this).closest(".my-list-item");
        var indexDiv = div.index();

        name.splice(indexDiv,1);
        localStorage.setItem( name, JSON.stringify(name));

        div.slideUp(2000, function(){
                if(name.length == 0){
                        ListMessage.fadeIn(1000);
                }
        $(this).remove();
        });

问题是代码运行时没有单击其中一个remove-button元素，而是运行在document.ready（）....

有人可以建议吗 1.一种很好的绑定方式（可以在一行中完成???可能更好的方式） 2.执行函数出了什么问题？

Answer 1

你的onClick代码块应该是这样的。

$(document).on( 'click', '.remove-button', function(){
            removeFromList();
});

function removeFromList(){
        alert ('hi');
    }

你可能有这样的html

<div class="remove-button">Remove Button</div>

============================================== < / p>

Answer 2

我发现了问题....这实际上是安静的愚蠢...... 工作的代码：

jQuery("#a, #b").on( 'click', '.remove-button', removeFromList );

function removeFromList() {

    var nameString;
    var name;

    if( jQuery(this).hasClass("kruiden") ){
        nameString = 'myPlantList';
        name = myPlantList;

    } else if( jQuery(this).hasClass("recept") ){
        nameString = 'myReceptenList';
        name = myReceptenList;
    }

        //define the div element which contains the item to be deleted
    var div = jQuery(this).closest(".my-list-item");
    var indexDiv = div.index();

    name.splice(indexDiv,1);
    localStorage.setItem( nameString, JSON.stringify(name));

    div.slideUp(2000, function(){
                if(name.length == 0){
                        ListMessage.fadeIn(1000);
                }
        $(this).remove();

    });

全局错误是通过removeFromList **（）**调用处理程序，那应该只是removeFromList

将事件绑定到几个类似的动态创建的元素并运行一个函数

2 个答案: