Reloading DIV (site) prevents further OnClick-handlers + visibility

Question

I have a DOM like this:

<div class="inner-content">
    <div class="catalogue" style="display: none;">
        <div class="wrapper">
            <!-- some dom here -->
            <button type="button" id="updateCatalogue">
        </div>
    <span class="addNewRow" data-row="1">add new row</span>
</div>

I also have a JS-function which triggers correctly, when clicking "click new row". Have a look here:

$('.addNewRow').click(function() {

    // determine closest wrapper
    var wrapper = $(this).closest(".questions");
    var kategorieId = $(this).data("row");

    // add another row
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last");
});

This code works perfectly fine when I open my site and navigate manually to the DIV I'm currently in. Worth mentioning, I'm doing a bit ajax-stuff, which I guess is part of the problem:

$('#updateCatalogue').click(function() {

    // inserting stuff 
    $('.new_question').each(function() {
        data = "some data";
        $.ajax({
            url: "my-file.asp",
            type: "GET",
            data: data,
            success: function(response) {
                console.log(question);

                // reload the frame afterwards
                $(".inner-content").load(location.href + " #catalogue");
            }
        });
    });
});

The part in the updateCatalogue-function is processed correctly and the code inside my-file.asp is doing its job as well. But as soon as the page "reloads", I can't click on "add new row" anymore... or more like, it doesn't do anything after that. No JS errors in my console.

Since I'm reloading the whole page, I should have access to everything, right?

Sidenote: These functions are in $(document).ready() if this is important for that

These elements are not dynamically created (I guess), since the site is reloaded, even though trough an ajax-call

but these aren't "dyncamically created", since the page is reloaded before, so they already exist in the dom. — DasSaffe, Mar 09 '17 at 16:21
It's similar to the other, but not an exact duplicate. It's different enough to warrant it's own question. — samanime, Mar 09 '17 at 16:59

score 3 · Accepted Answer · answered Mar 09 '17 at 16:23

The problem is, when you use $('selector').click(), it only sets up the click event the first time through. If you rebuild that, then it loses it's click().

You can just move your $('selector').click() bit to where you create them, but the better solution is to instead use $(document).on() instead.

$(document).on('click', '.addNewRow', function () {
    // do something here
});

You would just change your first code block to that. By putting the click event on the document (which is everything on the page), instead of the specific elements, it won't be lost if those elements change or go away. The second parameter then provides a filter selector, which is the same you would normally put when using .click() tells it to only trigger that click even if the element being clicked matches that filter.

toomanyredirects · Answer 2 · 2017-03-09T16:28:25.963

The problem is because you're binding your click handler to the button that exists on the page when it loads for the first time, but when you re-load the DIV content that button is replaced with a new (unbound) one.

You're better off using jQuery.on.

If you change your click handling code to the following it should work:

$('.inner-content').on('click', '.addNewRow', function() {

    // determine closest wrapper
    var wrapper = $(this).closest(".questions");
    var kategorieId = $(this).data("row");

    // add another row
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last");
});

The above works because you're not removing/replacing the inner-content DIV itself, just the content within it.

Reloading DIV (site) prevents further OnClick-handlers + visibility

2 Answers2