Problems with event binding on dynamically created elements

Question

I have code that is behaving one way on jsfiddle, one way on localhost, and another when uploaded to my website. I've been wrestling with the problem for a few days now. I don't know what tests or trial and errors I can run at this point.

This jsfiddle is working exactly as I want it to work.

http://jsfiddle.net/2ZLse/10/

When I insert this code into my project, and run it on localhost with WAMP, the javascript for the page does not work. The javascript is valid when run through jslint.

Stranger still, when I upload the exactly same files to my website, the javascript is functional, and I can even click on the watch button and render the form, but the nevermind button does not return me to the original state. I'm not receiving any errors on my cPanel.

When I replace

$(document).on('click', '.nevermind', function() {
    $('#imagebox').html(imagebox);
});

with

        $('.nevermind').click(function(){
    $('#imagebox').html(imagebox);
});

The localhost will function the same as the website functions, with functioning javascript, but without a functioning nevermind button.

Below is the code, but let me tell you more about the rest of the page incase it's relevant. I'm using php. It's a .php file, bootstrap is loaded and working, jquery is loaded, and the javascript is run at the bottom of the page, not the header. There is ajax running elsewhere on the page, which works on the website but not the localhost, and I have the correct connect.php file for each. My best guess is that ajax has something to do with it.

What is the problem, or what tests can I run?

Here is the HTML

<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>

                                <!-- images and continued input extension-->
        <!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>

Here is the javascript.

var imagebox = 'ORIGINAL STATE';

var watchform =  '<form action="post/watchpost.php" method="post">' + 
'<input type="text" name="watchid" /><br>' + 
'<input type="submit" class="btn btn-default" value="Contribute" />' + 
'</form>' + 
'<br><br><button type="button" class="btn btn-default nevermind">nevermind</button>';

$(document).ready(function(){
                                    //control functionality
$(document).on('click', '.nevermind', function() {
    $('#imagebox').html(imagebox);
});

$('#watchcontrol').click(function(){
    $('#imagebox').html(watchform);
});
});

Event binding on dynamically created elements? This question, while helpful, did not solve my issue. I believe my issue is separate from that one.

Are there any errors in your console? – Darren Jul 30 '14 at 03:30 — Darren, Jul 30 '14 at 03:30

Edward · Accepted Answer · 2014-07-30T04:26:53.533

0

The following only binds event handler to the EXISTING DOM element:

$('.nevermind').click(function(){
    $('#imagebox').html(imagebox);
});

which does not include what you append after clicking on #watchcontrol.

The following would work though, binding the event everytime when you create the dynamic element (even though I suggest that you free the element before removing it from the DOM):

$('#watchcontrol').click(function(){
    $('#imagebox').html(watchform);
    $('.nevermind').click(function(){
      $('#imagebox').html(imagebox);
    });
});

http://jsfiddle.net/2ZLse/11/

edited Jul 30 '14 at 04:26

answered Jul 30 '14 at 03:36

Edward

1,914
13
26

I was excited when I saw this answer, cause the code looks solid, but unfortunately it hasn't fixed the problem. The page behavior is exactly the same. Also, I'm not using that first patch of code you posted. That's just an alternative that for some strange, perhaps relevant reason makes the localhost closer to functioning. – Goose Jul 30 '14 at 03:42
my apologies, I did not read your question carefully. Did you check your console by any chance when you load the page? – Edward Jul 30 '14 at 03:47
I hate to say this, but how do I check my console with WAMP or my webhosts cPanel? Also, it seems that code is breaking javascript for some reason. The ajax stopped working when I inserted it. Code is still valid. – Goose Jul 30 '14 at 04:02
AhHA! I've got it. You've code was missing a }); at the end, but I'll still give you a check for a correct answer since I've been struggling with this for a long time and I've asked many people. This has been a project halting roadblock. Thank you so much! – Goose Jul 30 '14 at 04:11

Problems with event binding on dynamically created elements

1 Answers1