how can i sequence the same click event of same object

Question

I have an object say list in my html page,

EDIT based on comment: Here is my 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>

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

Script on page on DOM ready.

 $("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++
                });
            }
        });

No in my head section of the Page we have called a file called effect.js which also has a click event.

below function is in effects.js file

 $(".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);
    })

My question is which function will execute first and how can i call my getValues(0); as click event after executing my effect.js click function, only.

I hope i am able to explain, my question, it is to big and complicated to write and explain here.

Could you include some example XML data for the ajax response? — Stefan, Jan 05 '12 at 11:08
Thanks, played around with it and posted an answer, hope it helps. — Stefan, Jan 05 '12 at 12:06

techfoobar · Answer 1 · 2012-01-05T10:35:31.050

0

You cannot precisely control the order in which the bound events will be executed (unless you introduce some timing mechanism which wouldn't be a very clean approach).

However, in your case, to ensure that the effect.js action is executed before the other, you can change the binding from 'click' to 'mousedown' in effect.js (make sure you don't call preventDefault or return false from the event handler)

EDIT

Bind mouseup in your effect.js (instead of mousedown) - See this fiddle for a demo: http://jsfiddle.net/techfoobar/XANTY/

edited Jan 05 '12 at 10:35

answered Jan 05 '12 at 08:48

techfoobar

65,616
14
114
135

i have tried but it did not worked for me! any other solutions appreciated – Murtaza Jan 05 '12 at 10:28
EDIT: change the mosuedown i mentioned to mouseup. see updated answer. – techfoobar Jan 05 '12 at 10:34
by the way thanks for sharing your knowledge -i had tried both `$(".ddListData ul li").live('mouseup', function ()` my code does not work, even it does not give any error, banging my head on my desk. – Murtaza Jan 05 '12 at 10:55

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

If you need to achieve this behavior you have to use custom event's. Wrap your ajax data load event in a custom event and then trigger that event from the click event or vice versa.

For reference there is a complete implementation on this post.

edited May 23 '17 at 10:34

Community

1
1

answered Jan 05 '12 at 12:00

Matloob Ali

719
8
9

score 0 · Accepted Answer · answered Jan 05 '12 at 12:03

You can not control the order of which the event handlers are executed but by concatinating the two click event handlers you´re able to control the order of the things you´d like to do within the same handler.

Your example code contains couple of errors but I think I´ve fixed most of them;

$("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();
});

and

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
        );
});

See the complete solution at http://jsfiddle.net/3DQgh/

i working your code and implementing the stuff, but since i have only put the part of my code, i m facing big problems while implementing, hope i find a better way on your lines of instructions.. thanks for your help. — Murtaza, Jan 05 '12 at 12:25

how can i sequence the same click event of same object

3 Answers3