Using jQuery and standard JavaScript together

Question

I have this line of JavaScript / jQuery that I'm attempting to use to append an element to the DOM and then attach an eventlistener to.

$('.faq_answer').prev().append(finalRender.cloneNode(true)).addEventListener("click", function () {toggle(this)}, false);

I know the appending part works perfectly but adding an event listener is giving me grief.

Is it possible / advisable to use jQuery and normal JavaScript together like this? Or is there something in jQuery that would work better. (Very new to jQuery so bear with me).

jQuery and Javascript are incompatible. jQuery can't take it... (I'm just kidding) — jAndy
– jAndy, Commented Jul 4, 2011 at 15:10
if you are creating dynamic elements, use api.jquery.com/delegate to apply the event listener — John
– John, Commented Jul 4, 2011 at 15:11
@Felix - I'm assuming he's attempting to bind it to the inserted element, hence my relocation of the listener in my response. — Michael Wright
– Michael Wright, Commented Jul 4, 2011 at 15:13

user113716 · Accepted Answer · 2011-07-04 15:25:57Z

2

If you want to use the native methods, then you need to call them against DOM elements, not jQuery objects

var clone = finalRender.cloneNode(true);
clone.addEventListener("click", function () {toggle(this)}, false);

$('.faq_answer')
      .prev()
      .append( clone );

If you want to use jQuery, then you need to wrap the DOM elements in a jQuery object.

  // Drop your DOM element----v----into a jQuery object
var clone = $( finalRender.cloneNode(true) ).bind("click", function (){
    toggle(this);
});

$('.faq_answer')
      .prev()
      .append( clone );

edited Jul 4, 2011 at 15:25

answered Jul 4, 2011 at 15:10

user113716

323k64 gold badges454 silver badges441 bronze badges

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

Comments

Nicola Peluchetti · Accepted Answer · 2011-07-04 15:10:04Z

0

You could do something like this:

 $('.faq_answer').prev().append(finalRender.cloneNode(true)).click(function () {toggle(this)});

which is pure jquery

answered Jul 4, 2011 at 15:10

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

Michael Wright · Accepted Answer · 2011-07-04 15:10:35Z

0

I think you're wanting to add your event Listener to the cloned Node - not to the prev() of .faq_answer.

If you're importing jQuery, why not use the .click() method anyway instead of mixing? It's simpler! :)

$('.faq_answer').prev().append(finalRender.cloneNode(true).click(function(){
    toggle(this)
}));

answered Jul 4, 2011 at 15:10

Michael Wright

5912 silver badges2 bronze badges

2 Comments

user113716 Over a year ago

You're trying to call a jQuery method against a DOM element. That won't work.

Simon Over a year ago

What if you wrap it in jquery goodness like $(finalRender.cloneNode(true)).click(... etc ?

Pointy · Accepted Answer · 2011-07-04 15:10:42Z

0

Yes, it's possible to use them "together" because jQuery is JavaScript. However in this case there's really no reason to bind event handlers directly like that if you are using the library. It already knows how to manage event handlers, and doing it outside of its control is probably not a good idea unless you really know what you're doing.

answered Jul 4, 2011 at 15:10

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Tomgrohl · Accepted Answer · 2011-07-04 15:13:45Z

0

I find questions like this are strange, because jQuery is JavaScript.

Based on this mixing up the code that is just plain JavaScript with jQuery code is fine.

But if there is a simpler way of doing what you want in jQuery then I would say to just use jQuery alone.

answered Jul 4, 2011 at 15:13

Tomgrohl

1,75710 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using jQuery and standard JavaScript together

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related