e.preventDefault（）; undefined不是一个函数

Question

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?

Answer 1

<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 ".