I'm getting the following error that is saying my e.preventDefault(); ---> "e." undefined is not a function when clicking <button class='url_qry_add' onclick='url_qry_add(this);'>. The function itself is defined before the end of my </body> and I have only invoked jQuery once.

The function structure is as follows:

var url_qry_add = function ( e ) {
    e.preventDefault();
    ...
};

It used to be:

$( "ul.url_qry" ).on( "click", "li .url_qry_add", function ( e ) {
    e.preventDefault();
    ...
});

But subsequent buttons added dynamically afterwards were not being picked up.

So I've been trying to figure out how to go about it and decided I should try converting the problem function to a named "invokable" function and putting the call in manually with the onclick='..' into the buttons that exist before and after dynamic creation.

Like I say, the error must be in the way I've created the function or the way I'm calling it. The error can't be to do with the order of files and I have not accidentally nested the function within another function or a document.ready.

What am I doing wrong?

I'm getting the following error that is saying my e.preventDefault(); ---> "e." undefined is not a function when clicking <button class='url_qry_add' onclick='url_qry_add(this);'>. The function itself is defined before the end of my </body> and I have only invoked jQuery once.

The function structure is as follows:

var url_qry_add = function ( e ) {
    e.preventDefault();
    ...
};

It used to be:

$( "ul.url_qry" ).on( "click", "li .url_qry_add", function ( e ) {
    e.preventDefault();
    ...
});

But subsequent buttons added dynamically afterwards were not being picked up.

So I've been trying to figure out how to go about it and decided I should try converting the problem function to a named "invokable" function and putting the call in manually with the onclick='..' into the buttons that exist before and after dynamic creation.

Like I say, the error must be in the way I've created the function or the way I'm calling it. The error can't be to do with the order of files and I have not accidentally nested the function within another function or a document.ready.

What am I doing wrong?

• javascript
• jquery

Share Improve this question Follow edited Nov 7, 2014 at 8:14 Jonathan asked Nov 7, 2014 at 8:03 JonathanJonathan 11.5k99 gold badges6969 silver badges8383 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

<button class='url_qry_add' onclick='url_qry_add(event);'>

var url_qry_add = function (e) {
    console.log(typeof e.preventDefault); // function 
};

Update:

I'll try clarify how it works "internally", when we add attributes to function url_qry_add "inside" it looks like this:

document.querySelector('.url_qry_add').addEventListener('click', function (event) {
  (function (event) {
    url_qry_add(event, this, $(this));
  }).call(event.target, event);
});

var url_qry_add = function (event, element, $jElement) {
  console.log(event);
  console.log(element);
  console.log($jElement);
};

Hence, we have variable "event" (event object, where we have method preventDefault and so on), and "this" (current element). I hope that this explanation will help you understand where we get variable "event".