jQuery Mobile .delegate() 未触发
我对 jQuery 很陌生,并且在与委托相关的问题上遇到了一些困难。 在我的代码中,我加载了一个动态页面:
$("#results").delegate('li', 'click', function(evt){
var queryData = "id=" + $(this).attr("id");
if ( $(this).attr("id") ){
$.ajax({
type: "GET",
url: "wiw_detail_page.html",
data: queryData,
beforeSend: onDetailBeforeSend,
success: onDetailSuccess,
error: onError
});
}
else
{
alert("Please select an Employee from the list");
}
return false;
});
这是 onDetailSuccess 函数:
function onDetailSuccess( data, status ){
$("body").append( data );
$("#wiw_detail_page").page( );
$.mobile.changePage( "#wiw_detail_page", { transition: 'slide' } );
}
一切正常,因为我将第一页移动到“wiw_details_page”。 在新页面内,我有一个可折叠的字段列表,如下所示:
<div data-role="collapsible" data-collapsed="false" data-theme="b" id="comData">
<h2>Communication Data</h2>
<div id="communicationData">
<fieldset>
<label for="address">Address:</label>
<a href="#locationMap">
<input class="goMap" type="text"
name="address" id="address"
disabled="true"
value="<%=employeeprofile-building%>"/>
</a>
</fieldset>
</div>
</div>
我需要在地址输入字段上附加一个单击处理程序,并且由于该页面尚未在 $(document).ready( ) 创建,所以我附加了像这样的委托:
// Use delegation, since detail view is not availble at document.ready time:
$("#wiw_detail_page").delegate('input.goMap','click', function(evt){
if ( $(this).attr( "id" ) == 'address' ){
alert("Click!");
if ( navigator.geolocation ) {
detectBrowser( );
navigator.geolocation.getCurrentPosition( function( position ){
newInitialize( position.coords.latitude, position.coords.longitude );
})
}else{
detectBrowser( );
newInitialize(45.06150, 7.65599);
}
}
});
});
这个委托永远不会发生,当我单击输入字段时,什么也没有发生(甚至没有任何类型的错误)。
我还尝试将选择器更改为:
$("#comData").delegate('input.goMap','click', function(evt)
作为绝望的尝试,我将其更改为:
$("body").delegate('input.goMap','click', function(evt)
有线索吗?
抱歉问了这么长的问题,提前致谢, R。
I'm quite new to jQuery and I'm struggling a bit on an issue related to delegation.
In my code I have a dynamic page loaded by:
$("#results").delegate('li', 'click', function(evt){
var queryData = "id=" + $(this).attr("id");
if ( $(this).attr("id") ){
$.ajax({
type: "GET",
url: "wiw_detail_page.html",
data: queryData,
beforeSend: onDetailBeforeSend,
success: onDetailSuccess,
error: onError
});
}
else
{
alert("Please select an Employee from the list");
}
return false;
});
This is the onDetailSuccess function:
function onDetailSuccess( data, status ){
$("body").append( data );
$("#wiw_detail_page").page( );
$.mobile.changePage( "#wiw_detail_page", { transition: 'slide' } );
}
Everything works well, as I get my first page moved to "wiw_details_page".
Inside the new page I have a list of fields, under a collapsible, like that:
<div data-role="collapsible" data-collapsed="false" data-theme="b" id="comData">
<h2>Communication Data</h2>
<div id="communicationData">
<fieldset>
<label for="address">Address:</label>
<a href="#locationMap">
<input class="goMap" type="text"
name="address" id="address"
disabled="true"
value="<%=employeeprofile-building%>"/>
</a>
</fieldset>
</div>
</div>
I need to attach a click handler on the Address input field, and since this page is not yet created at $(document).ready( ) I attached a delegate to it like this:
// Use delegation, since detail view is not availble at document.ready time:
$("#wiw_detail_page").delegate('input.goMap','click', function(evt){
if ( $(this).attr( "id" ) == 'address' ){
alert("Click!");
if ( navigator.geolocation ) {
detectBrowser( );
navigator.geolocation.getCurrentPosition( function( position ){
newInitialize( position.coords.latitude, position.coords.longitude );
})
}else{
detectBrowser( );
newInitialize(45.06150, 7.65599);
}
}
});
});
This delegation never takes place and when I click on the input field nothing happens (not even any kind of error).
I have also tried by changing the selector to:
$("#comData").delegate('input.goMap','click', function(evt)
And as a desperate try, I changed it to:
$("body").delegate('input.goMap','click', function(evt)
Any clue?
Sorry for such a long question and thanks in advance,
R.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您想尝试
#communicationData
,如下所示:Would you like to try
#communicationData
, as in: