Javascript breaks when I update html with Ajax

Question

Having a problem with a webapp i've been working on lately, and it has to do with ajax reloading breaking javascript.

I have the following Ajax Call

$.ajax({
                type: "POST",
                url:  "/sortByIngredient/",
                data: JSON.stringify(
                {
                    selectedIngredients: tempDict
                }),
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    var curList = $("#drinkList").contents();
                    console.log(curList);
                    $("#drinkList").empty()
                    $("#drinkList").append(data)

and the following Html UL

 <div id = "drinkList" class="d-list">
                <ul>
                    <li id='someID'>some Item</li>
                    <li id='someID2'>some Item2</li>
                </ul>
            </div>

I also have a jQuery callback set to activate on clicked list items. On initial loading, all works well. Once the ajax call occurs, and replaces the contents of #drinkList with another list, formatted identically. In case anyone is curious, here is the onClick callback:

$("li").click(function()
    {
        window.currentDrink = $(this).attr("id");
        console.log(window.currentDrink);
         $.ajax({
            url: "/getDrink/" + $(this).attr("id"),
            type: "get",
            success: function(data){
                $("#ingDiv").html(data);
            }
        });
    });

After I make that Ajax call, the list modifies correctly, but after that, no more javascript seems to work. For example,the console.log is not called when i click on a list item, and the proper view doesnt update(#ingDiv, as shown in the above call)

Is my changing the HTML through Ajax breaking the javascript somehow? Am I missing something obvious? If it isn't clear already, I am not a web developer.

Adil Shaikh · Accepted Answer · 2013-05-17 20:51:17Z

5

use event delegation like this -

$('#drinkList').on('click','li',function(){
     // do your stuff here
});

As you are not a web developer - This is what your code should look after changes

$('#drinkList').on('click', 'li', function () {
    window.currentDrink = $(this).attr("id");
    console.log(window.currentDrink);
    $.ajax({
        url: "/getDrink/" + $(this).attr("id"),
        type: "get",
        success: function (data) {
            $("#ingDiv").html(data);
        }
    });
});

edited May 17, 2013 at 20:51

answered May 17, 2013 at 19:56

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tadgh Over a year ago

That worked perfectly. So what exactly is going on here? Previously, it was bound to individual list items, and now it is bound to the overall div? From my cursory look at delegation, it seems that this is now bound to the div that holds the list. This then allows elements to be added and removed without mucking up the list bindings? Correct me if I am missing something

Adil Shaikh Over a year ago

Yes, you are right. delegation takes care of event binding even if you are adding element's dynamically. But remember, as we are binding event's on overall div, #drinkList this div should remain in the DOM for this to work. Or else you can always bind event's to document like this --> $(document).on('click', 'li', function () {

Tadgh Over a year ago

drinkList will in fact be remaining in the DOM. Thank you very much.

Collectives™ on Stack Overflow

Javascript breaks when I update html with Ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related