CODEWITHSUNDEEP
javascriptjqueryfirebug
Houman
Houman

Reputation: 66320

JS Breakpoint doesn't get hit, but code executes

I have an unsual problem and working on it since hours. My breakpoint doesn't get hit within the function yet the functionality works, it is driving me crazy. I have tried this with both Chrome/developer tools and Firefox/Firebug. I never had something like this before.

The first breakpoint hits when I click on the button New Conversation. But then when I click on Cancel Button that comes through the jquery .load() the break point doesn't hit. Yet the functionality behind it executes (the div gets emptied).

What am I missing please?

function cancel_new_conversation(event){
    //2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
    event.preventDefault();
    $('#new_conversation_div').empty();
}

function new_conversation(event){
    event.preventDefault();
    var url = $(this).attr("href") + "/";
    $('#new_conversation_div').load(url, function(){
       //1st Breakpoint gets hit.               
       $('#new_conversation_cancel_button').click(cancel_new_conversation);     
    }); 
}

$(document).ready(function (){      
  $('#new_conversation_button').click(new_conversation);
}

Is there anything I am doing that breaks the javascript somehow?

EDIT:

Good idea with the alerts. here is the proof. Maybe its an environment issue? I have to try it on a different machine.

enter image description here enter image description here

Upvotes: 2

Views: 1918

Answers (2)

Houman
Houman

Reputation: 66320

After lunch yesterday in my infinite wisdom I had my partial html that I was meant to load with $('#new_conversation_div').load(url, function() designed as a full blown html with header and body.

Hence once it was loaded into my div, the html markup became completely a mess (two headers, two bodies)

I moved the javascript file from the corrupted partial html into my main html and removed the header and body from the partial html. Now that I .load() the partial html, it all works as expected and the breakpoint hits. It was very hard to find.

Hope this helps someone else.

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

The only problem i can see in your code is that you don't unbind click event on #new_conversation_cancel_button when loading a new conversation. If you use jquery >1.7, you should test following code:

function cancel_new_conversation(event){
    //2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
    event.preventDefault();
    console.log("cancel_new_conversation");
    $('#new_conversation_div').empty();
}

function new_conversation(event){
    event.preventDefault();
    var url = $(this).attr("href") + "/";
    $('#new_conversation_div').load(url, function(){
       //1st Breakpoint gets hit.               
       $('#new_conversation_cancel_button').off('click').on('click',cancel_new_conversation);     
    }); 
}
$(document).ready(function (){      
  $('#new_conversation_button').on('click',new_conversation);
});

​

Upvotes: 0

Related Questions