CODEWITHSUNDEEP
jqueryaddeventlistener
DaveC426913
DaveC426913

Reputation: 2046

addEventListener to element

I don't get what it wants.

init = function () {
    $loginContent = $('#reg-content');
    $closeButton = $($loginContent.find('#modal_close').first());
    $closeButton.addEventListener('click', Kobo._modal.close);
};

$closeButton exists, I can console.log it, but I get

"$closeButton.addEventListener is not a function"

Upvotes: 1

Views: 494

Answers (3)

OJay
OJay

Reputation: 4921

You mixing jQuery and JavaScript. Either do it one way or the other. addEventListener is a function on a DOM element object. If you use jQuery you are dealing with jQuery objects not DOM element objects. jQuery has several ways to do it, usually you would use on i.e.

jQuery way

init = function () {
    $loginContent = $('#reg-content');
    $closeButton = $($loginContent.find('#modal_close').first());
    $closeButton.on('click', Kobo._modal.close);
};

pure JavaScript way

 init = function () {
        loginContent = document.getElementById('reg-content');
        closeButton = loginContent.querySelector('#modal_close');
        closeButton.addEventListener('click', Kobo._modal.close);
    };

you could mix the two a bit if you like, as in jQuery you have access to the actual DOM elements via an index i.e.

init = function () {
    $loginContent = $('#reg-content');
    $closeButton = $($loginContent.find('#modal_close').first());
    $closeButton[0].addEventListener('click', Kobo._modal.close);
};

A couple of other points: You don't need to wrap the find of the #modal_close in another jQuery object, it is already a jQuery object so

$closeButton = $($loginContent.find('#modal_close').first());

can just be

$closeButton = $loginContent.find('#modal_close').first();

ids on the page should be unique. i.e. there is only one element on the page with the id of #modal_close, so doing a select of its parent, then finding it, and then doing first all seems a bit too much. You could just simplify to

  init = function () {
        $('#modal_close').on('click', Kobo._modal.close);
    };

but I am assuming what your HTML structure is, and when you run this handler so may not work in your implementation, without me knowing more.

If it still doesn't work, make sure that the elements are on the page when this code runs. Now jQuery is quite forgiving. If your code runs and those element do not exist on the page at the time, there will be no error, it will just not work. If you use pure JavaScript and those elements do not exist on the page, there will be an error, so just be wary of trying to add an event listener onto an element that may not exist, better practice would be to check that it exists first. In jQuery I find it helpful to check the length. i.e. 

var $modal_close =  $('#modal_close');
if($modal_close.length > 0)
{
    //we have found an element, and can safely do something with it
}

I have seen a lot of developers do this to check if something has been found and it is wrong

var $modal_close =  $('#modal_close');
if($modal_close)
{
    //wrong, jQuery always returns a jQuery object, 
    //even if it finds NO elements
}

Since jQuery always returns a jQuery object, and because anything other than null, undefined, 0 or false resolves to true in JavaScript, the jQuery object will resolve to true, even if it hasn't found anything i.e. the .length is 0

or in pure javascript, simply check that the element is not null (null resolves to false, so the if statement will only work if it acutally has found something)

var modal_close =  document.getElementById('modal_close');
if(modal_close)
{
    //we have found an element, and can safely do something with it
}

If you are wanting to run this code on future elements, then you need to look into event delegation, jQuery has a solution for that, its just an extension of the .on function, so if you need to know more, check on the jQuery documentation

Upvotes: 1

Barmar
Barmar

Reputation: 781028

addEventListener is a DOM method, but $closeButton is a jQuery object. You can use jQuery's .get() method to get the corresponding DOM element.

$closeButton = $loginContent.find('#modal_close').get(0);

But I don't understand why you're not just using the equivalent jQuery method:

$closeButton.on("click", Kobo._modal.close);

Upvotes: 0

JSelser
JSelser

Reputation: 3630

It means there is no addEventListener loaded as a jQuery plugin and doesn't exist at all, if you are including it in your scripts, it MUST be BEFORE your code in your html.

Why not use the regular jQuery event binder? It'd be like this:

$closeButton.on('click', Kobo._modal.close);

I don't know what Kobo._modal.close is, but make sure it's a function.

Upvotes: 0

Related Questions