2

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

例如我用这种方式

$(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

4

5 回答 5

3

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

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

每次我改变任何东西。

于 2013-08-15T12:34:43.303 回答
1

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

如果您无法手动绑定.chosen()，append那么您可能需要研究一下MutationObserver，尽管浏览器支持相当前沿。

于 2013-08-15T12:35:57.127 回答
1

我刚刚在另一个问题上找到了我需要的答案，但从未被接受。答案是马里奥·贝拉特（Mario Bellart），当 jQuery 元素附加到 DOM 时触发 OnAppend 事件

我如何改编他的代码

//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() 和创建自定义事件。也许我应该做更多的阅读。

于 2013-08-15T13:05:03.213 回答
1

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

于 2013-08-15T12:59:06.770 回答
0

我遇到了向我创建和附加的元素添加一个类的问题，因为这个类有转换，如果元素不在 DOM 树中，css 转换不起作用，我尝试过的所有解决方案都不起作用我所以我最终得到了这个解决方法：

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

这样，只有在 DOM 中添加了元素后，才会添加该类。

于 2017-03-29T09:54:14.297 回答