CODEWITHSUNDEEP
javascriptjquery
Christian Page
Christian Page

Reputation: 151

Add input box to div on click .html

I have a simple jQuery script setup to add an input box to the div when the div is clicked. The only problem is, when I click in the input box to add text, it thinks I'm clicking on the div again and try's to add the input box again, not letting me add text.

$(".match").click(function() {
    var match_id = $(this).find(".match_id").text();
    $(this).find("#bet").html("<div><input type='text'></div>");
});

Any ideas how to fix it?

Upvotes: 0

Views: 214

Answers (1)

Travesty3
Travesty3

Reputation: 14479

The problem is that the input is in the div. So you need to stop the click event from propagating to the div.

Try adding this:

$('.match input').click(function(e) {
    e.stopPropagation();
    e.cancelBubble = true;
});

Or, if you only want one input ever added to the div, you can change your event listener to this:

$('.match').one('click', function() {
    ...
});

one() will execute the event listener and then immediately remove it from that element, so it will only execute a maximum of once for each matched element.

Upvotes: 3

Related Questions