我如何可以序列相同的對象

相同的單擊事件我有一個對象在我的html頁面說名單，我如何可以序列相同的對象

編輯基於評論：這是我的XML

<?xml version="1.0" encoding="utf-8"?> 
<Root> 
    <Item> 
    <Property_Cat_ID>1</Property_Cat_ID> 
    <Property_Cat_Name>Buy</Property_Cat_Name> 
    </Item> 
    <Item> 
    <Property_Cat_ID>2</Property_Cat_ID> 
    <Property_Cat_Name>Rent</Property_Cat_Name> 
    </Item> 
</Root>

就是HTML

<div class="ddpan01"> 
    <div class="ddBoxHold"> 
      <div class="ddBox"> 
       <asp:TextBox ID="txtCat" runat="server" Value="Buy" ReadOnly="true"></asp:TextBox> 
       <asp:HiddenField ID="hdnTypeId" runat="server" Value="0" /> 
       <span></span> 
      </div> 
      <div class="ddList"> 
       <div class="ddListData"> 
        <ul> 
        </ul> 
       </div> 
     </div> 
    </div> 
</div>

DOM準備好頁面上的腳本。

$("div.ddpan01 div.ddBoxHold").find("div.ddList").find("div.ddListData ul li").click(function() { 
      alert('click'); 
      getValues(0); // function which does dynamic value assigning work to all my fields 
     }) 
$.ajax({ 
      type: "GET", 
      url: "/Admin/Includes/XML/PropertyCategory.xml", 
      dataType: "xml", 
      success: function (xml) { 
       var count = 1; 
       $(xml).find('Item').each(function() { 
        var id = $(this).find('Property_Cat_ID').text(); 
        var name = $(this).find('Property_Cat_Name').text(); 
        if (count == 1) { 
         $("div.tabdpan02").find("div.ddpan div.ddpan01 div.ddBoxHold div.ddBox input:first").val(name); 
         $("div.tabdpan02").find("div.ddpan div.ddpan01 div.ddBoxHold div.ddBox input:last").val(id); 
        } 
        $("<li id=" + id + "></li>").html(name).appendTo($("div.tabdpan02").find("div.ddpan div.ddpan01 div.ddBoxHold div.ddList div.ddListData ul")); 
        count++ 
       }); 
      } 
     });

沒有在頁面的我的頭節，我們稱爲叫effect.js文件，它也有一個click事件。

以下功能在effects.js文件

$(".ddListData ul li").live('click', function() { 
     var htmlStr = $(this).html(); 
     var hId = $(this).attr('id'); 

     $(this).parent('ul').parent('div').parent('div').prev('.ddBox').find('input:first').val(htmlStr); 
     $(this).parent('ul').parent('div').parent('div').prev('.ddBox').find('input:last').val(hId); 
     $(this).parent('ul').parent('div').parent('div').hide(0); 
    })

我的問題是它的功能將執行第一，我怎麼能執行我的effect.js單擊功能後，纔打電話給我getValues(0);的單擊事件。

我希望我能夠解釋，我的問題，這是寫和解釋這裏的大和複雜。

來源

2012-01-05 Murtaza

完整的解決方案，你可能包括Ajax響應一些示例XML數據？ – Stefan 2012-01-05 11:08:04

是的，請檢查編輯。 – Murtaza 2012-01-05 11:23:39

謝謝，玩了它併發布了一個答案，希望它有幫助。 – Stefan 2012-01-05 12:06:07

您無法控制事件處理程序的執行順序，但可以通過簡化兩個單擊事件處理程序來控制您想要在同一處理程序中執行的操作的順序。

您的示例代碼包含幾個錯誤，但我認爲我已修復其中的大部分錯誤;

$("div.ddListData ul").on('click', 'li', function() { 

    console.log('Triggered click event, this =', this); // DEBUG 

    // Call getValue() 
    getValues(0); // function which does dynamic value assigning work to all my fields 

    // NOTE: Declaring elements to reduce lookups 
    var $this = $(this); 
    var $parent = $this.parent('ul').parent('div').parent('div'); 
    var $ddBoxes = $parent.prev('.ddBox'); 
    // NOTE: You should be able to find a shorter way to select the element(s). 

    // Hide .ddBoxes and set value of its first input 
    $ddBoxes.hide().find('input:first').val($this.html()); 

    // Set value of the last input 
    $ddBoxes.find('input:last').val(this.id); 

    // Hide some parent element 
    $parent.hide(); 
});

和

var $xml = $(data); 
var $items = $xml.find('Item'); 

$items.each(function (index) { 

    var $this = $(this); 
    var id = $this.find('Property_Cat_ID').text(); 
    var name = $this.find('Property_Cat_Name').text(); 

    if (index == 0) { // First item 

    } 

    $("<li id=" + id + "></li>").html(name) 
     .appendTo(
      $('.ddpan02 .ddListData ul') 
      //$("div.tabdpan02").find("div.ddpan div.ddpan01 div.ddBoxHold div.ddList div.ddListData ul") // Invalid and way to long selector 
     ); 
});

看到http://jsfiddle.net/3DQgh/

來源

2012-01-05 12:03:59 Stefan

我工作你的代碼和實現的東西，但因爲我只把我的代碼的一部分，即時通訊實施時面臨的大問題，希望我找到一條更好的方式對你的指示線..謝謝你你的幫助。 – Murtaza 2012-01-05 12:25:30

你不能精確地控制綁定事件的執行順序（除非你引入了一些不是很乾淨的方法）。

但是，在你的情況下，爲了確保effect.js動作在另一個之前執行，你可以在effect.js中將'binding'從'click'更改爲'mousedown'（確保你沒有調用preventDefault或從事件處理程序返回false）

編輯

綁定mouseup在effect.js的（而不是mousedown） - 看到這個搗鼓一個演示：http://jsfiddle.net/techfoobar/XANTY/

來源

2012-01-05 08:48:21 techfoobar

我已經嘗試過，但它沒有爲我工作！任何其他解決方案讚賞 – Murtaza 2012-01-05 10:28:30

編輯：改變我提到的mouseup的mosuedown。看到更新的答案。 – techfoobar 2012-01-05 10:34:45

感謝您分享您的知識-i曾嘗試使用'$（「。ddListData ul li」）。live（'mouseup'，function（）'我的代碼不起作用，即使它沒有給出任何錯誤，我的頭在我的桌子上 – Murtaza 2012-01-05 10:55:56

如果你需要做到這一點行爲你必須使用cu stom事件的。將ajax數據加載事件包裹在自定義事件中，然後從click事件觸發該事件，反之亦然。

作爲參考，此post上有一個完整的實施。

來源

2012-01-05 12:00:57

我如何可以序列相同的對象

回答

相關問題