javascript - Add input box to div on click .html -

i have simple jquery script setup add input box div when div clicked. problem is, when click in input box add text, thinks i'm clicking on div again , try's add 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 fix it?

the problem input in div. need stop click event propagating div.

try adding this:

$('.match input').click(function(e) {     e.stoppropagation();     e.cancelbubble = true; }); 

or, if want 1 input ever added div, can change event listener this:

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

one() execute event listener , remove element, execute maximum of once each matched element.