1
我想獲得動態按鈕元素（#EditAsset）來點擊觸發，但由於它是一個點擊事件（#Results_Grid）的div內，這是觸發的唯一事件。我發現一些關閉傳播的例子，以便您可以訪問這些元素，但它不起作用。我有一種感覺，我可能會做錯什麼，所以任何幫助將不勝感激！家長點擊事件觸發，而不是兒童點擊事件jQuery + salesforce
<apex:page docType="html-5.0" standardStylesheets="false" showHeader="false" standardController="Assets__c" extensions="AS_Viewer_m">
<apex:stylesheet value="{!URLFOR($Resource.jQuery_Mobile_1_1_1, 'jquery.mobile-1.1.1.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQuery_Mobile_1_1_1, 'js/jquery-1.7.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQuery_Mobile_1_1_1, 'jquery.mobile-1.1.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQuery_Mobile_1_1_1, 'js/jquery-ui-1.8.22.custom.min.js')}"/>
<link rel="stylesheet" href="{!URLFOR($Resource.jQuery_Mobile_1_1_1, 'SGMobile.css')}"/>
<apex:stylesheet value="{!$Resource.AS_CSS_m}"/>
<script>
var j$ = jQuery.noConflict();
var Results_Div=j$('#Results_Grid');
var Results_Grid_Header=j$('#Results_Grid_Header');
var QFilter;
var SearchString;
var PowersCombined;
var oldResultElement;
var id;
var com;
j$(function() {
Results_Div=j$('#Results_Grid');
QFilter=j$('#Query_Filter').val();
SearchString=j$('#SearchBox').val();
PowersCombined=QFilter+'°'+SearchString;
j$('#Search_Submit').click(function(){
QFilter=j$('#Query_Filter').val();
SearchString=j$('#SearchBox').val();
PowersCombined=QFilter+'°'+SearchString;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AS_Viewer_m.getAssets}',
PowersCombined,
function(result, event)
{
j$(Results_Div).children().remove();
id=result.id;
for(var b = 0; b < result.length; b++){
j$('<div class="ui-grid-d" name="AssetGrid" id="AssetGrid'+result[b].Id+'" >'+
'<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Name+'</div></div>'+
'<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Model__r.Name+'</div></div>'+
'<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Serial_Number__c+'</div></div>'+
'<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].User+'</div></div>'+
'<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Acquisition_Date__c+'</div></div>'+
'<div id="AssetInfo'+result[b].Id+'" name="AssetInfo" style="width:1000px; margin:0 auto;"></div>'+
'</div>').appendTo(Results_Div);
}
},{escape: true});
});
j$('#Results_Grid').on('click','div[name="AssetGrid"]', function() {
j$(com).empty();
if (oldResultElement!=null){
j$(oldResultElement).children().remove();
}
var st=this.id;
com='#AssetInfo'+st.substring(9);
oldResultElement='#AssetInfo'+st.substring(9);
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AS_Viewer_m.getAsset}',
st.substring(9),
function(result, event)
{
id=result.id;
if(result.RecordType.DeveloperName=='Infrastructure_Hardware'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_Number__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Host Name: </b>'+result.Host_Name__c+'<br/>'+
'<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
'<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="#" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Monitor'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="#" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Peripheral_Device'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Host Name: </b>'+result.Host_Name__c+'<br/>'+
'<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
'<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="#" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Phone'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Carrier:</b>'+result.Carrier__c+'<br/>'+
'<b>Phone Number: </b>'+result.Phone_Number__c+'<br/>'+
'<b>IMEI Number: </b>'+result.IMEI_Number__c+'<br/>'+
'<b>PIN Number: </b>'+result.PIN_Number__c+'<br/>'+
'<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
'<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="#" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Scanner'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="{!URLFOR($Page.AS_AssetEdit_m,null,[id='+id+'])}" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Software'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Workstation'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Host Name: </b>'+result.Host_Name__c+'<br/>'+
'<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
'<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="float:left;width:300px;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}else if(result.RecordType.DeveloperName=='Mobile_Device'){
j$('<div style="width:500px;float:left;">'+
'<b>Asset Name: </b>'+result.Name+'<br/>'+
'<b>Serial Number: </b>'+result.Serial_nuMber__c+'<br/>'+
'<b>Model: </b>'+result.Model__r.Name+'<br/>'+
'<b>Carrier: </b>'+result.Carrier__c+'<br/>'+
'<b>Phone Number: </b>'+result.Phone_Number__c+'<br/>'+
'<b>IMEI Number: </b>'+result.IMEI_Number__c+'<br/>'+
'<b>PIN Number: </b>'+result.PIN_Number__c+'<br/>'+
'<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
'<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
'<b>Comments: </b>'+result.Comments__c+'<br/>'+
'</div>'+
'<div style="width:300px;float:left;padding:0px 0px 0px 80px;">'+
'<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
'<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
'<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
'<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
'<b>Allocation: </b>'+result.User__c+'<br/>'+
'</div>'+
'<div style="width:80px;float:left;">'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}" href="#" id="Edit_Asset"/><br/>'+
'<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}" href="#" id="Delete_Asset"/>'+
'</div>'+
'<br style="clear:both;"/>').appendTo(com);
}
},{escape: true});
});
j$(com).click('div[name="AssetInfo"]', function(e) {
e.stopPropagation();
alert('worked');
});
});
</script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<apex:form >
<div data-role="header">
<h1>Find Asset</h1>
</div>
<div id="Search_Div" class="Element_LeftAlign">
<input type="text" id="SearchBox" style="width:300px;display:inline;"/>
<button type="button" style="vertical-align:bottom;display:inline;" id="Search_Submit">Search</button>
<select size="1" id="Query_Filter">
<option value="00">--Please select--</option>
<option value="01">Serial Number</option>
<option value="02">Name</option>
<option value="03">Allocated To</option>
<option value="04">In Inventory</option>
</select>
<!--Make this a button that expands out-->
</div>
<div id="Results_Grid_Header" data-theme="d" style="display:inline;position:fixed;top:170px;">
<div class="ui-grid-d">
<div class="ui-block-a ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Name</b></div></div>
<div class="ui-block-b ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Model</b></div></div>
<div class="ui-block-c ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Serial Number</b></div></div>
<div class="ui-block-d ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Allocated To</b></div></div>
<div class="ui-block-e ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Acquisition Date</b></div></div>
</div>
<div id="Results_Grid" class="" style="overflow:auto;height:350px;">
</div>
</div>
</apex:form>
</apex:page>
我試過這個，但它似乎沒有按照它所描述的方式工作。即使在底部有停止傳播的情況下，該div仍然會點擊，就像存在與之相關的事件。如果我點擊子按鈕或者甚至在按鈕周圍的空白區域，它仍然會觸發事件。 – bpl3792
如何添加e.preventDefault（）？ –
@ bpl3792，** [Here]（http://jsfiddle.net/TRuKk/5/）**是我的聲明的演示。如果您刪除了stopPropagation，則父事件將在子事件之後觸發。 –