触发父点击事件而不是子点击事件jQuery + salesforce

时间:2012-09-12 18:19:46

标签: javascript jquery salesforce visualforce

我正在尝试让动态按钮元素(#EditAsset)在点击时触发,但由于它位于带有点击事件(#Results_Grid)的div内,这是唯一被触发的事件。我找到了一些关闭传播的示例,因此您可以访问这些元素,但它不起作用。我有一种感觉,我可能会做错事,所以任何帮助都会非常感激!

<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>

1 个答案:

答案 0 :(得分:1)

在执行事件之后放置stopPropation()方法。这将阻止在此之后触发所有事件。即。

j$(com).click('div[name="AssetInfo"]', function(e) {
     alert('worked');
     // all the code to be execute

     e.stopPropagation();
});