adding onclick event on replace with jquery

Question

I'm having a problem on putting onclick event on a replaceWith on jquery. My function on the 2nd onclick event is not functioning. This is my sample code.

sample.html

<div id = "first_div" onClick = "replace()">First</div>

my.js

function replace() {
    $('#first_div').replaceWith("<div id = 'sec_div' onclick='flyout('fb')'>Second</div>");
}

When I click the first_div it works. It shows the 2nd_div, but when I click the 2nd div it doesn't do anything.

function flyout(data){
    if (data == "fb") $('#sec_div').replaceWith("<div>Last</div>");
}

Both answers below suggest the .live() function. You may want to use the .on() function which has replaced .live() in more recent versions of jQuery. api.jquery.com/on — Surreal Dreams
– Surreal Dreams, Commented Feb 20, 2012 at 16:37

driangle · Accepted Answer · 2012-02-20 16:48:44Z

1

The reason your code doesn't work is that you're not passing a function to the 'onclick' of the #sec_div element. You have it defined as onclick="flyout('fb');", but the flyout function doesn't return anything. I changed the code below so that flyout returns a function and encapsulates the value of data in its closure, in case you want to use this same function with different values for the data parameter.

Also, I have a provided a solution which helps to separate your HTML from your Javascript. Using jquery you can accomplish that by using the delegate method to bind a function to any event.

HTML:

<div id="first_div">First</div>

JS:

$("body").delegate('#first_div', 'click', replace);
$("body").delegate('#sec_div', 'click', flyout("fb"));

// change replace to:
function replace() {
    $(this).replaceWith("<div id='sec_div'>Second</div>");
}
// change flyout to:
function flyout(data){
    return (function(){ 
       if (data == "fb") {
          $(this).replaceWith("<div>Last</div>"); 
       }
    });
}

EDIT: According to the latest jquery documentation use of the live method is deprecated, use delegate instead.

edited Feb 20, 2012 at 16:48

answered Feb 20, 2012 at 16:34

driangle

11.8k6 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vivek Over a year ago

@ggreiner .live() function is not recommended. From the documention of jquery .lve() is superseded by .delegate() method.If using jQuery 1.7+ then .on() function is recommended.

Dave · Accepted Answer · 2012-02-20 16:33:20Z

1

There is no click event bound to the new div.

Either add a new listener after the replaceWith() call or else use live() to listen at the document level.

answered Feb 20, 2012 at 16:33

Dave

4,4223 gold badges26 silver badges30 bronze badges

2 Comments

Kamina Over a year ago

Ha? what do you mean? I have click event on the sec_div and this is where the problem is. When clicking the sec_div, it doesn't show the Last div.

Surreal Dreams Over a year ago

You put onclick in the code, but the DOM won't recognize it. It's not bound to the new element. Because the page is already built, you have to bind the new event with a different method.

SoWhat · Accepted Answer · 2012-02-20 16:39:48Z

1

You haven't escaped it properly in the function replace. The

onclick='flyout('fb')'

part has three four single quotes. the second quote closes the first quote and the third quote starts a new string. Try escaping it as follows

  element="<div id = 'sec_div' onclick='flyout(\"fb\")'>Second</div>"
$('#first_div').replaceWith(element);

Also checkout http://jsfiddle.net/5Stuh/

answered Feb 20, 2012 at 16:39

SoWhat

5,6222 gold badges30 silver badges63 bronze badges

Collectives™ on Stack Overflow

adding onclick event on replace with jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related