我创建了可排序元素并在每个portlet上附加了一个on-click事件来打开对话框，但是当我打开（将更多portlet拖到主仪表板），然后单击设置链接（在portlet的标题上）时alert（）（我为测试目的设置）总是为主仪表板上的每个portlet触发，为什么会发生这种情况？
下面是我用来设置另一个可排序的接收元素的代码 可排序的（你可以看到左侧的元素）。
您可以在此网址上看到一些屏幕截图：http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/
如果您需要HTML标记，我稍后会发布..
顺便说一句，我是jQuery的新手..
谢谢！
$(function() {
var param ; //additional param to the a portlet ; later
var title = ""; //title for prototyping only
$("#maincontent .column").sortable({
connectWith: ['#maincontent .column'],
opacity: 0.6,
scroll: false,
handle : ".portlet-header",
receive: function(event, ui) {
var id = $(ui.item).attr('id');
var chartId = 'chart-'+id ;
$("#"+id+" > .portlet-content").flash({
data: '/swf/open-flash-chart.swf',
id: chartId,
name: 'chart-'+id,
expressInstall: true ,
flashvars: {
'data-file': '/chart/'+id
},
})
$("#"+id).find("span").removeClass("ui-icon ui-icon-arrow-4-diag");
$("#"+id).addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-close"></span>')
.prepend('<span class="ui-icon ui-icon-wrench"></span>')
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$("#maincontent .column .portlet-header .ui-icon-plusthick").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$("#maincontent .column .portlet-header .ui-icon-wrench").click(function() {
$("#dialog").css("visibility","visible");
//dialog
alert($(this).parent('div').attr('id'));
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width:300,
modal: true,
buttons: {
'Update Chart': function() {
title = $("#title").val();
url = "/chart/"+id+"?title="+title+'&id='+id ;
$.getJSON(url,function(data) { jsonData = data ; reloadJsonData() }) ;
function reloadJsonData() {
data = JSON.stringify(jsonData) ;
tmp = findSWF(chartId);
tmp.load(data);
}
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
//allFields.val('').removeClass('ui-state-error');
}
});
$('#dialog').dialog('open');
});
$("#maincontent .column .portlet-header .ui-icon-close").click(function() {
$(this).parents(".portlet:first").remove();
});
//resize();
},
start: function(event, ui) {
},
stop: function(event, ui) {
// Here's the trick:
$("#maincontent .column").each(function() {
//alert($(this).sortable("toArray"));
//$(this).resizable();
})
}
})
$("#maincontent .column .portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-close"></span>')
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$("#maincontent .column .portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$("#maincontent .column .portlet-header .ui-icon-close").click(function() {
$(this).parents(".portlet:first").remove();
});
$("#maincontent .column").disableSelection();
});
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
更新：
感谢Kyle的回答，
在重新检查我的代码并尝试你提出的改变后，我认为主要的问题是我们如何告诉对话框他的父元素（他来自哪个portlet）。在上面的代码中，在我点击更新按钮后，受影响的portlet始终是我放到主区域的第一个portlet ..，我希望我的解释对你来说足够明了..，谢谢！
顺便说一句，这是单个portlet的标记：
<div id="gambarTigaSatu" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="opacity: 1;">
<div class="portlet-header ui-widget-header ui-corner-all">
<span class="ui-icon ui-icon-plusthick"/>
<span class="ui-icon ui-icon-wrench" id="setup-gambarTigaSatu"/>
<span class="ui-icon ui-icon-close"/>
<span class=""/>SDM yang Terlibat Kegiatan Penelitian dan Pengabdian Masyarakat (Valid)
</div>
<div class="portlet-content">
<object width="320" height="180" data="/swf/open-flash-chart.swf" type="application/x-shockwave-flash" style="vertical-align: text-top;"
name="chart-gambarTigaSatu" id="chart-gambarTigaSatu"><param value="data-file=/chart/gambarTigaSatu" name="flashvars"/>
</object>
</div>
</div>
ui-icon-wrench id会自动添加，仅供测试，我试试 遍历dom，并从那里获取对象元素的id。对象元素 也可以使用swfobject自动生成，你可以看到上面的代码.. （顺便说一句，答案的评论仅限于300个字符，所以我在这里发帖）
最诚挚的问候，
Wildan
答案 0 :(得分：1)
我不确定我是否完全理解你的问题，但是，我认为你想说的是当你拖动一个portlet时，它应该将一个click事件监听器绑定到'setup'（扳手）您的portlet上的按钮，以便在单击时弹出一个对话框。并且，您说当您单击该扳手时，会弹出一个对话框，其中显示所有您的portlet，而不仅仅是您单击其中的按钮的那个。
如果是这种情况，可能是您多次绑定该扳手，以便在点击时，它会像点击多次一样。我给你的唯一建议是，不要使用'click'方法，而是使用'bind'方法。
这就是我的意思......不要这样做：
$("#maincontent .column .portlet-header .ui-icon-wrench").click(function() {
// do stuff here
});
执行此操作，看看是否有任何区别：
$("#maincontent .column .portlet-header .ui-icon-wrench").unbind('click').bind('click',function() {
// do stuff here
});
如果这没有用，请告诉我，我会看看能不能帮助你。
<强>更新 好的，所以我想我现在可能会理解你的问题了...当点击扳手时，会弹出一个对话框，在那个对话框中你可以对某个portlet进行更改。但是，您不知道如何让对话框知道它应该在更新时影响哪个portlet。
所以，就此而言，你可以这样做：
$("#maincontent .column .portlet-header .ui-icon-wrench").unbind('click').bind('click',function() {
var portlet_to_edit = $(this).parents('.portlet').attr('id');
$("#dialog").css("visibility","visible");
$('#dialog').data('my_app.portlet_to_edit',portlet_to_edit);
$("#dialog").dialog({
// some of your stuff here...
buttons: {
'Update Chart': function() {
var portlet_to_edit_id = $(this).data('my_app.portlet_to_edit');
var portlet_to_edit = $('#'+portlet_to_edit_id);
// Do stuff with 'portlet_to_edit', for instance:
portlet_to_edit.find('.portlet-content').remove();
// ... or whatever you wanted to do...
},
// the rest of your buttons and stuff
}
});
$('#dialog').dialog('open');
});
到你的
答案 1 :(得分：0)
我认为答案很简单，只需使用$（this），这样只会触发特定portlet的事件句柄..这是我在JQuery体验中的问题..