jQuery的选定插件(在此处找到:http://harvesthq.github.com/chosen/)添加了额外的功能来选择HTML元素。我可以使用以下代码将功能添加到页面上加载的初始元素中:
$(document).ready(function(){
$(".chosenProperties").data("placeholder","Select properties...").chosen();
$(".chosenType").data("placeholder","Type...").chosen();
$(".chosenInstance").data("placeholder","Instance...").chosen()
那个有效。所有这三类选择元素都显示在一个名为#newGroup的div中。页面上有一个按钮可“添加”新组,该组将克隆#newGroup div并将其添加到第一个组的正下方。
它包含相同的元素。但是,当我尝试将“选择的”功能添加到克隆的div中的选择项时,它们将被冻结。该界面看起来与第一个界面相同,因此已加载“选择的”,但是当我单击它们时,什么也没有发生。这是代码:
$( '#swl-add-group-button' ).click( function() {
//addGroupToGUI();
createClassAddRow();
} );
var rowNum = 0;
function createClassAddRow() {
rowNum++;
newRow = jQuery('#newGroup').clone().css('display', '');
newHTML = newRow.html().replace(/0/g, 1);
newRow.initializeJSElements();
newRow.html(newHTML);
newRow.initializeJSElements();
jQuery('#mainTable').append(newRow);
addGroup(newRow);
}
jQuery.fn.initializeJSElements = function (){
this.find(".chosenProperties").each( function() {
alert('test');
if($(".chosenProperties").data("placeholder", "Select properties...").chosen()){
alert('test2');
}
});
this.find(".chosenType").each( function() {
jQuery(this).data("placeholder","Type...").chosen();
});
this.find(".chosenInstance").each( function(){
jQuery(this).data("placeholder", "Instance...").chosen();
})
}
将同时出现警报test和test2。因此,我认为jQuery正在加载,但由于某种原因它无法正常工作。另外,我不确定这是否有区别,但是当我将鼠标悬停在克隆的div的select元素上时,它会显示javascript:void(1),而当我将鼠标悬停在原始div时,它会显示javascript:void(0)。
最佳答案
我想到的工作类似于Abhinav的工作。
我删除了选择的生成代码。
从选择框中删除“ chzn-done”类。
关闭显示:选择框上没有显示,然后重新应用于选择框
$j("#masterCats_chzn").remove();
$j("#masterCats").css({display: "inline-block"}).removeClass("chzn-done").addClass("chsn");
$j(".chsn").chosen();