Question

所以我知道jQuery的.on（）函数给动态添加元素的事件处理程序。

E.g我用这种方式

$(document).on("change",Items,function(){/*Code here*/});

但是有一种方法可以使用这个.on（）函数（或其他东西）在对象被追加到文档后调用函数吗？我问这个是因为我正在使用一个名为Chosen的jquery插件来创建更好的选择框，它可以通过使用行来工作

$(selector).chosen();

然而，如果在将元素附加到文档之前使用该行，则该行不起作用，并且为了清洁我的代码，如果我可以在元素具有调用函数来运行该行时将会很好已附加，而不是在我添加元素后添加该行。

编辑：问题不在于我在添加元素后无法使用.chosen（）。因为我可以！我只是希望能够保持我的代码更好地组织，因为没有将$（selector）.chosen（）行隐藏在我的代码底部一直未被注意。

我的代码：

//Create the dropdown box for the items
var Items = document.createElement("select");
$(Items).attr( {"id":"Items"} );

$(document).on("change",Items,
    function(){
        updateHolder(true);
        $(InfoBox).trigger("chosen:updated");
        setTimeout(
            function(){
                $(Items).data('chosen').input_blur();
            }, 100
        );
    }
);

//Add items from ED.listOfItems to HTML Items dropdown box
for(var it in ED.listOfItems){
    var iKey = ED.listOfItems[it];
    var itemOption = document.createElement("option");
    if(!Array.isArray(iKey)){
        $(itemOption).val(iKey);
        $(itemOption).html(iKey.split("_")[0]);
    }
    else{
        $(itemOption).val(iKey[0]);
        $(itemOption).html(iKey[1]);

    }
    $(Items).append( itemOption );
}

/*******Set default to spawn*******/
/**/ ED.objectType = "Spawn";   /**/
/**/ ED.infoType = "";          /**/
/**/ $(Items).val("Spawn");     /**/
/**********************************/


$(MenuBar).append(Items);

$(Items).chosen({disable_search_threshold: 100});
$("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"});

正如你所看到的，第二行到最后一行是选定的行，但它似乎对我来说似乎是一个不合逻辑的地方。我的代码非常强迫症：P

Answer 1

也许有更好的方法，但我通常会在新创建的元素中添加类似“to_replace”的类，然后使用：

$(".to_replace").each(function() {
    $(this).removeClass("to_replace").choosen();   
})

每次我改变任何东西。

Answer 2

~~document不会触发change事件。~~（编辑 OP正在委派change）

如果您无法在.chosen()之后手动绑定append，那么您可能需要查看MutationObserver，尽管浏览器支持相当紧凑。

Answer 3

你可以使用livequery插件https://github.com/brandonaaron/livequery，最好的解决方案绝对是https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events，但浏览器支持真的很差。

Answer 4

我刚刚在另一个问题上找到了我需要的答案，但它从未被接受过。答案是马里奥·贝拉特，Fire OnAppend event for jQuery element when it gets appended to the DOM

我如何调整他的代码

//Create the dropdown box for the items
var Items = document.createElement("select");
$(Items).attr( {"id":"Items"} );

$(document).on("append", Items,
    function(){
        $(Items).chosen({disable_search_threshold: 100});
        $("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"});
    }
);

$(document).on("change",Items,
    function(){
        updateHolder(true);
        $(InfoBox).trigger("chosen:updated");
        setTimeout(
            function(){
                $(Items).data('chosen').input_blur();
            }, 100
        );
    }
);

//Add items from ED.listOfItems to HTML Items dropdown box
for(var it in ED.listOfItems){
    var iKey = ED.listOfItems[it];
    var itemOption = document.createElement("option");
    if(!Array.isArray(iKey)){
        $(itemOption).val(iKey);
        $(itemOption).html(iKey.split("_")[0]);
    }
    else{
        $(itemOption).val(iKey[0]);
        $(itemOption).html(iKey[1]);

    }
    $(Items).append( itemOption );
}

/*******Set default to spawn*******/
/**/ ED.objectType = "Spawn";   /**/
/**/ ED.infoType = "";          /**/
/**/ $(Items).val("Spawn");     /**/
/**********************************/

$(MenuBar).append(Items).trigger("append");

我不知道.trigger（）和创建自定义事件。也许我应该多做一些阅读。

Answer 5

我遇到了为已经创建和追加的元素添加类的问题，因为这个类有转换，如果元素不在DOM树中，css转换不起作用，所有解决方案都是＆＃ 39;我试过没有为我工作所以我最终得到了这个解决方法：

  elementParent.append(elementToAdd);
  setTimeout(() => {
    $(elementToAdd).addClass("show");
  }, 0);

通过这种方式，只有在DOM中添加元素后才会添加类。

jQuery .on（）“追加”

5 个答案: