How to convert a string to html and add a event, descard after use?

Question

I would like to make a button by creating new as every time user require. after user clicked on the button i would like to remove that.

for that i created this sting to html, but not working.

var tool = "";
            tool += '<div class="toolTip" id="toolTip">';
            tool +=    '<a href="#" class="btn btn-info saveText btn-xs copy">Save Text</a> </div>';

var rightButton =  $(tool).clone();

var i = 0;

var button = $('a.saveText');

$('div').mouseenter(function(){
    rightButton.appendTo('body');
})

button.click(function(e){
    console.log(++i);
    e.preventDefault();
    $(this).remove();
})

what was the issue here?

JSfiddle

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Dec 30 '14 at 17:00
FYI, jQuery has a [method to define an even that only triggers one](http://api.jquery.com/one/). — Álvaro González, Dec 30 '14 at 17:09

Antiga · Accepted Answer · 2014-12-30T17:18:04.623

1

Edit: Rewriting my original answer that was trying to "fix" this. I think it would be more beneficial to see a more appropriate approach to what you're trying to do.

$('.content').mouseenter(function(){
    $('#button').show();
});

$('#button').click(function(e) {
    $(this).hide();
});

http://jsfiddle.net/x2fokkh4/6/

Is there a requirement that you need to dynamically blow out and re-clone the button? If so, I will delete the answer. Otherwise, this is a much cleaner approach.

edited Dec 30 '14 at 17:18

answered Dec 30 '14 at 17:01

Antiga

2,264
1
20
28

It should be noted a better approach might be to just show/hide the link. – Clint Powell Dec 30 '14 at 17:02
@ClintPowell I agree. It should be noted there are much better ways to do this entirely. I was just trying to make it work within the original paradigm. – Antiga Dec 30 '14 at 17:03
@Antiga, as knowledge I ask you a question, when i store a `dom` element to variable (which has click event), then re-appending to body, but it triggers multiple 'clicks` - what is the issue/correct oppoach? - if you don't mind. – 3gwebtrain Dec 30 '14 at 17:13
Show/hide approach is fine as long as only one button is required, but the question doesn't inform us of that. – Roamer-1888 Dec 30 '14 at 17:39
yes, i struggling with dynamic content issue. i have a button(static), it has to do the job to the dynamic contents. after i save the dynamic content again. now i clicking back to button it calls 3 times.. i could not find a solution for this.. that's what i trying to append the button using dynamic. – 3gwebtrain Dec 30 '14 at 17:42

score 1 · Answer 2 · answered Dec 30 '14 at 17:14

Something like this:

var i = 0;
$('div').on('mouseenter', function(){
    $('<div class="toolTip" id="toolTip"><a href="#" class="btn btn-info saveText btn-xs copy">Save Text</a> </div>').appendTo('body');
})

$('body').on('click', '.saveText', function(e){
    console.log(++i);
    e.preventDefault();
    $(this).remove();
})

jsfiddle http://jsfiddle.net/j8x42Lbh/2/

mplungjan · Answer 3 · 2014-12-30T17:45:38.923

You just need to add inside the event - you also might want to test if there already is a link available - or actually just show and hide the whole thing instead

$('div').mouseenter(function(){
    $(tool).appendTo('body');
    var button = $('a.saveText');
    button.click(function(e){
      e.preventDefault();
      $(this).parent().remove(); // you want the whole thing to go
    });
});

or delegate the click:

$("body").on("click","a.saveText",function(e) {
  e.preventDefault();
  $(this).parent().remove();
});

$('div').mouseenter(function(){
   $(tool).appendTo('body');
});

var tool = "";
   tool += '<div class="toolTip" id="toolTip">';
            tool +=    '<a href="#" class="btn btn-info saveText btn-xs copy">Save Text</a> </div>';
    


$('div').mouseenter(function(){
    $(tool).appendTo('body');
    var button = $('a.saveText');
    button.click(function(e){
      e.preventDefault();
      $(this).parent().remove();
    });
});

div.content{
    border:1px solid red;
    height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>

If `tool` is an HTML string, then why `$(tool).clone()`? `$(tool)` on its own will create a new instance. — Roamer-1888, Dec 30 '14 at 17:43

How to convert a string to html and add a event, descard after use?

3 Answers3