jQuery UI对话框-实时无法正常工作? [英] jquery ui dialog - live not working?
问题描述
我正在使用此对话框: http://docs.jquery.com/UI/Dialog
要打开对话框，请按以下方式操作:
$('a.openModal').live("click", function() {
var idArr = $(this).attr('id').split("OpenNote");
var id = idArr[1];
alert($(".modalNote#dialog-modal" + id).html());
$(".modalNote#dialog-modal" + id).dialog('open');
return false;
});
单击标题时，此对话框用于显示注释内容.当我在页面加载上生成html时，此方法可以正常工作，但是如果我动态添加html，则对话框将无法打开.将其附加到div时也不会隐藏.
是否可以即时"打开它?
我尝试了这个，但还是没事...
$(document).delegate('a.openModal', 'click', function() {
var idArr = $(this).attr('id').split("OpenNote");
var id = idArr[1];
alert($(".modalNote#dialog-modal" + id).html());
$(".modalNote#dialog-modal" + id).dialog('open');
return false;
});
下面是完整的简化示例:
HTML:
<div id="mlist">
<!-- Modal for Viewing a Saved Note (called by a.modal4) -->
<div class="modalNote2" id="dialog-modal106" title="Test (10.6.2010)">
Content...
</div>
<!-- End of Modal -->
</div>
<a href="#" class="openModal2">Add new</a>
JS:
//Global Script for Calling a Fourth Modal with a class of "modal4"
$(".modalNote2").dialog({
autoOpen: false,
width: 500,
height: 375,
position: ['center', 'center'],
modal: true
});
$("#mlist").append("<div class=\"modalNote2\" title=\"Test (10.6.2010)\">fghfghfghfghfghsdf</div>");
$(document).delegate('a.openModal2', 'click', function() {
$(".modalNote2").dialog('open');
return false;
});
当我单击链接时，会添加新的模式div，当前的div会打开，但新的div不会打开，并且会显示出来.
编辑3
我按照以下说明进行操作，如果我采用这种方式，则可以简化很多事情: http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/
var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');
$('.openModal').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
但是ajax生成的链接仍然存在问题.
编辑4-已解决！
最后，我找到了解决方法！
var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');
$(document).delegate(".openModal", "click", function() {
var $link = $(this);
var $dialog = $('<div></div>')
.append($loading.clone())
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$dialog.dialog('open');
return false;
});
之所以会发生这种情况，是因为您将事件绑定到页面上当前的对象，因此当您随后注入新的HTML时，这些事件将不会绑定到它.如果您使用的是jQuery 1.4，则可以使用.delegate()方法解决此问题，如下所示:
$(document).delegate('a.openModal', 'click', function(){
// your .live code here
});
这会将事件绑定到始终存在的文档，该事件搜索选择器的实例.出于性能方面的考虑，您应该用任何最接近的静态父代替换$(document)来始终包含您的选择器.
如果您使用的是jQuery的早期版本，则应查看livequery插件.我会提供一个链接，但我是通过手机从机场回答的. :)
I'm using this dialog: http://docs.jquery.com/UI/Dialog
To open dialog I do it this way:
$('a.openModal').live("click", function() {
var idArr = $(this).attr('id').split("OpenNote");
var id = idArr[1];
alert($(".modalNote#dialog-modal" + id).html());
$(".modalNote#dialog-modal" + id).dialog('open');
return false;
});
This dialog is used to display content of note when title is clicked. When I generated html on pageload, then this works fine, but if I add html dynamically then dialog won't open. It is also not hidden when it's appended to div.
Is it possible to open it "on-fly"?
EDIT 1:
I tried this, but still nothing...
$(document).delegate('a.openModal', 'click', function() {
var idArr = $(this).attr('id').split("OpenNote");
var id = idArr[1];
alert($(".modalNote#dialog-modal" + id).html());
$(".modalNote#dialog-modal" + id).dialog('open');
return false;
});
EDIT 2:
Here's complete, simplified example:
HTML:
<div id="mlist">
<!-- Modal for Viewing a Saved Note (called by a.modal4) -->
<div class="modalNote2" id="dialog-modal106" title="Test (10.6.2010)">
Content...
</div>
<!-- End of Modal -->
</div>
<a href="#" class="openModal2">Add new</a>
JS:
//Global Script for Calling a Fourth Modal with a class of "modal4"
$(".modalNote2").dialog({
autoOpen: false,
width: 500,
height: 375,
position: ['center', 'center'],
modal: true
});
$("#mlist").append("<div class=\"modalNote2\" title=\"Test (10.6.2010)\">fghfghfghfghfghsdf</div>");
$(document).delegate('a.openModal2', 'click', function() {
$(".modalNote2").dialog('open');
return false;
});
When I click on link, new modal div is added, current one is opened but new one is not, and it is being displayed.
EDIT 3
I followed these instruction and things are much simplified if I do it this way: http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/
var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');
$('.openModal').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
but problem with ajax-generated links still stays.
EDIT 4 - SOLVED!
Finally, I found solution!
var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');
$(document).delegate(".openModal", "click", function() {
var $link = $(this);
var $dialog = $('<div></div>')
.append($loading.clone())
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$dialog.dialog('open');
return false;
});
This is happening because you're binding events to objects currently on the page, so when you inject new HTML afterwards these events won't be bound to it. If you're using jQuery 1.4 then you can solve this with the .delegate() method like so:
$(document).delegate('a.openModal', 'click', function(){
// your .live code here
});
This binds an event to the document, which is always there, that searches for instances of your selector. For performance reasons you should replace $(document) with whatever closest static parent will always contain your selector.
If you're usng an earlier version of jQuery you should look into the livequery plugin. I'd provide a link but I'm answering this from the airport on my phone. :)
这篇关于jQuery UI对话框-实时无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
