2

I have a jquery functionality where I have two tabs.
On click, each tab makes an ajax call and paints a jsp page.
Second tab has got a slide toggle.

My problem is initially when the page loads I click on the second tab, the slide toggle works fine.

When I click on the first tab and click on the second tab the slide toggle will quickly open and close.

How to stop this propagation?

I tried event .preventDefault(), stopPropagation(), die etc.. no luck.

The code I tried is in below. The slide toggle method is one js file and the other two in a different js file. 

jQuery(function() {

    //$(".trigger1").on('click', function (e) {
    $("#qstnlist_content").off('click', '.trigger1').on('click', '.trigger1', function(event) {

        // $(".trigger1").die('click').live('click',function(event){
        //if($(event.target).is('div.trigger1')){
        //$("document").off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) {
        var str = $(this).find("span.imgplus").text();

        if (str.indexOf("+") >= 0) $(this).find("span.imgplus").html("- ");
        if (str.indexOf("-") >= 0) $(this).find("span.imgplus").html("+ ");

        $(this).next("div.dispnone").slideToggle("slow");

/* if(event.preventDefault){ event.preventDefault()}

            else{event.stop()};

            event.returnValue = false;*/

        event.stopImmediatePropagation();
        event.stopPropagation();
        return false;

    });

});
$("#list_intrv_qstns").off('click').on('click', function(event) {

    $("#qstnlist_content").removeClass();
    $("#qstnlist_content").addClass('dispnone');
    $("#qstn_content").removeClass();
    $("#qstn_content").addClass('dispshow');
    $("#qstnlist_content").off("click", ".trigger1");

    event.stopImmediatePropagation();

    $("#list_intrv_qstns_a").css('color', 'black');
    $("#start_intrv_a").css('color', 'white');
    $("#add_intrv_qstns_a").css('color', 'white');
    $("#create_intrv_qstns_a").css('color', 'white');
    $("#create_intrv_template_a").css('color', 'white');
    var inputData = {
        usrid: $(this).data("usrid"),
        buddyId: $("#qstbuddyid").val()
    }
    $.ajax({
        url: "listquestions",
        dataType: "html",
        data: inputData,
        success: function(data) {
            $("#qstn_content").empty().html(data);
        },
        error: function() {
            alert('Issue with save. ');
        }
    });

    //   if(event.preventDefault){ event.preventDefault()}
    // else{event.stop()};
    //event.returnValue = false;
    event.stopImmediatePropagation();
    event.stopPropagation();

});
$("#list_intrv_qstns").click();


//  $("#add_intrv_qstns").die('click').live('click', function(e){
$("#add_intrv_qstns").off('click').on('click', function(event) {

    $("#qstnlist_content").removeClass();
    $("#qstnlist_content").addClass('dispshow');
    $("#qstn_content").removeClass();
    $("#qstn_content").addClass('dispnone');

    //$("#qstnlist_content").off("click",".trigger1");
    $("#list_intrv_qstns_a").css('color', 'white');
    $("#start_intrv_a").css('color', 'white');
    $("#add_intrv_qstns_a").css('color', 'black');
    $("#create_intrv_qstns_a").css('color', 'white');
    $("#create_intrv_template_a").css('color', 'white');
    var inputData = {
        usrid: $('#usrid').val(),
        buddyId: $("#qstbuddyid").val()
    }
    $.ajax({
        url: "questions",
        dataType: "html",
        data: inputData,
        success: function(data) {
            $("#qstnlist_content").empty().html(data);
        },
        error: function() {
            alert('Issue with loading add questions. ');
        }
    });

    //event.stopPropagation();
    event.stopImmediatePropagation();
    event.stopPropagation();
    //event.preventDefault();
    // event.preventCapture();
    //event.preventBubble();
    //  if(event.preventDefault){ event.preventDefault()}
    //else{event.stop()};
    //event.returnValue = false;
    //event.stopImmediatePropagation();


});​

Jsp:

<div class="Interviewprocess">
    <form id="feedback_form" action="savefeedback" method="post">
        <fieldset>
            <legend>Interview Process</legend>
            <input type="hidden" name="buddyBO.intrvBuddyId" value="${interviewModel.buddyBO.intrvBuddyId}">

            <ul id="tabmenu" >
                <li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="add_intrv_qstns"><a href="#"         id="add_intrv_qstns_a" style="color:white">Add Questions</a></li>
                <li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_intrv_qstns"><a href="#"     id="create_intrv_qstns_a" style="color:white">Create Questions</a></li>
                <li data-usrid="${hmEmpId}" id="list_intrv_qstns"><a href="#" id="list_intrv_qstns_a"  class="active"     style="color:black">Review Question List</a></li>
                <!--<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_qstns_template"><a href="#"     id="create_qstns_template_a" style="color:white">Crt</a></li>-->
                <li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="start_intrv"><a href="#" id="start_intrv_a"     style="color:white">Start Interview</a></li>
            </ul>

            <div id="qstn_content" ></div><!--content-->
            <div id="qstnlist_content" class="dispnone"></div>
        </fieldset>
    </form>
</div>
Nope
  • 22,147
  • 7
  • 47
  • 72
priya
  • 61
  • 1
  • 5
  • You still seem to have related issues to the ones posted back in July: http://stackoverflow.com/questions/11531159/jquery-slide-toggle-doesnot-work-with-dynamically-painted-data-thru-ajax-after Back than it was pointed out `live()` is very bad and using `on()` or `delegate()` is the way to bind to dynamically created elements instead. Among the many issues `live()` has, one of them is that `stopPropogation()` won't work with it. It is worth spending time on the jQuery documentation site to check why people are saying `live()` is bad, can save you a few hours of re-factoring. – Nope Aug 11 '12 at 01:41

1 Answers1

1

To quote from the documentation, one of the many drawbacks of live() is:

Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document

Since jQuery 1.7 you should be using on() instead of live() or if you are using an older version bind() or delegate().

See this post for more details on the different binding methods and when they were added and who replaced which and when.

Try using off(), on() instead. For example:

$("#list_intrv_qstns").off('click').on('click', function (e) {

Or if list_intrv_qstns is a dynamically added element:

$(document).off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) {

Note though that for dynamic elements you should be binding to the closest static element but as I don't know what that is in your code I used document but you can replace that.

Additional Resources
click()
bind()
live() (don't use)
delegate()
on()

Community
  • 1
  • 1
Nope
  • 22,147
  • 7
  • 47
  • 72
  • In addition also see the documentation for `stopPropagation()` (http://api.jquery.com/event.stopPropagation/), to quote: `Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events.` – Nope Aug 10 '12 at 22:05
  • Hi Thank you so much for your pointers. I tried on and off . though the static elements work , i still have a prpblem with the toggle. The data in the toggleslider gets painted dynamically , so i was previously attaching to the class selector .live. now i tried $("document").off('click', 'div.trigger1').on('click', 'div.trigger1', function (e) { , i tried with the nearest static element too . the click event is not firing at all.any ideas why? – priya Aug 12 '12 at 00:57
  • @priya: I used your posted code and the click event attached to `.trigger1` is fired. See fiddle: http://jsfiddle.net/FranWahl/wMg8f/ I injected the elements within the ajax success myself as I obviously don't have access to your urls but nonetheless the elements are added dynamically. I added a `console.log("Iam inside .trigger1")` into the first line of the click event which gets written to the console output. Can you do the same in your production code and see if it also writes that line to the console. `On()` was added in jQuery 1.7. What version are you using? – Nope Aug 12 '12 at 07:54
  • @priya: When running the fiddle above, open the fiddle, open the console output window (F12 hotkey I think). Then click `Add Question`, that injects the element with the class of `trigger`. Than click on the text `Iam .trigger1` (which is your elements with class `trigger1`), that will trigger the bound click event of this dynamic element and write the console output I added as the first line. If you are using FF you need to install FireBug AddOn for debugging, Chrome and IE have it build-in. I used Chrome. Let me know how you get on. – Nope Aug 12 '12 at 08:02
  • hey Fraincois wahl, thanks for all your help. I tried it. what i did was i created a separate file for each jsp related JS. if you see my jsp , the ajax call is loading a separate jsp on each tab click. separating in to multiple js and including only the one related to perticualr jsp , has stopped binding clicks to the other dom elements( not in that perticularjsp) and that solved the issue. it might not be the perfect solution but it worked.your answer has pointed me to move in right direction so i mark it as answer. I am too new here,pls tell me how to mark your comments as answer? – priya Aug 14 '12 at 18:48
  • @priya: I'm glad you found a solution. That's the main thing. It might be a good idea if you edit your question and add what you did to fix your issue so it is more visible to anyone else in the future. To accept an answer you click the checkmark on the right side beside the answer you want to accept. – Nope Aug 14 '12 at 19:02