This question has been asked/answered (mostly) before, BUT I’ve tried three things to stop the event from bubbling but nothing has worked:
JavaScript
x
4
1
return false;
2
e.stopPropagation();
3
e.preventDefault();
4
(return false should take care of the other two, correct?)
Here’s the html:
JavaScript
1
4
1
<div class="tags-holder">
2
<input type="text" class="addField" id="addField_<%= visit.id %>" placeholder="add a new tag">
3
</div>
4
And the JS (UPDATE CLEANED UP):
JavaScript
1
10
10
1
$('.addField').show().keyup(function(event){
2
event.preventDefault();
3
4
if(event.keyCode == 13 || event.keyCode==9) {
5
ProfilePage.createTag( this, 'nada', 'addField')
6
$(this).hide().val('');
7
8
return false;
9
}
10
});
I left the redundant stoppers in there but really shouldn’t return false simply kill the bubbling? (using Chrome).
Clue? keyCode=13 is “Enter”
Advertisement
Answer
Wow. Your help was great and helped me think it through.
BUT the solution feels a bit like a cop-out; effective, but the condition should never be there in the first place.
Here it is, which I found in the comments from here: http://yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/
JavaScript
1
21
21
1
$('.plus').unbind('click').bind('click',function(e){
2
console.log('clicked')
3
var id=$(this).attr('plus_id');
4
var field=$('<input type="text">').attr({'placeholder':'add a new tag','id': 'addField_' + id, 'visit_id':id});
5
field.focus();
6
field.show().keydown(function(event){
7
event.stopImmediatePropagation();
8
if(event.keyCode == 13 || event.keyCode==9) {
9
console.log(event)
10
ProfilePage.createTag( field, 'nada', 'addField')
11
field.hide().val('');
12
return false;
13
}
14
}).click(function(e){
15
return false;
16
})
17
;
18
$(this).append(field);
19
return false;
20
});
21