Question

我的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);称为click事件。

我希望我能够解释，我的问题是，在这里写作和解释是大而复杂的。

Answer 1

您无法精确控制绑定事件的执行顺序（除非您引入一些不是非常干净的方法的计时机制）。

但是，在您的情况下，为确保effect.js操作在另一个之前执行，您可以在effect.js中将绑定从“click”更改为“mousedown”（确保不要调用preventDefault或从事件处理程序返回false）

修改

在你的effect.js中绑定mouseup（而不是mousedown） - 请参阅此小提琴进行演示：http://jsfiddle.net/techfoobar/XANTY/

Answer 2

如果您需要实现此行为，则必须使用自定义事件。将ajax数据加载事件包装在自定义事件中，然后从click事件触发该事件，反之亦然。

作为参考，这个post有一个完整的实现。

Answer 3

您无法控制执行事件处理程序的顺序，但通过合并两个单击事件处理程序，您可以控制您希望在同一个处理程序中执行的操作的顺序。

您的示例代码包含几个错误，但我认为我已经修复了大部分错误;

$("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/

上的完整解决方案

如何对同一对象的同一点击事件进行排序

3 个答案: