I'm receiving an ajax response, and based on this adding some html content to the dom.

Problem: I want to also add a link that should have a onclick function with passing a parameter from the response.

Example: http://jsfiddle.net/zu1ymrh8/55/

<a class="LoadFromAjax" href="#">Load Ajax</a>
<div class="appendedContainer"></div>


$(function() {
  function myfunc(input) {
    alert("test: "   input);
  }
  
  $(".LoadFromAjax").on("click", function() {
      event.preventDefault();

      $.ajax({
        url: 'https://dog.ceo/api/breeds/list/all',
        type : 'get',
        complete : function( qXHR, textStatus ) {
            var mock = "John"; //some values extracted from rsp

            $('.appendedContainer').hide();
            $('.appendedContainer').append(`<a href='#' onclick='myfunc(${mock})' class='mylink'>Alert me</a>`);
            $('.appendedContainer').fadeIn();
          }
      });
  });

});

Result: ReferenceError: myfunct is not defined. Why?

CodePudding user response：

I suggest setting the click listener on the container element.

See example below

document.querySelector('button').addEventListener('click', load);
const container = document.querySelector('.container');

// delegating the click handler to the container
container.addEventListener('click', handleItemClick);

function load() {

 Promise
  .resolve(Date.now())
  .then(entry => {
    const child = document.createElement('a');
    child.innerText = entry;
    container.append(child);
  })
}


function handleItemClick(ev) {
  console.log(ev.target.innerText)
}

a {
  display: block;
}

<button>Load</button> 
<div class="container"></div> 

CodePudding user response：

How about something like:

$.ajax({
  ...,
  complete : function( qXHR, textStatus ) {
    var mock = "John"; //some values extracted from rsp

    // create a link:
    var link = $('<a>', {
      href : "the-url",
      class : "the-class",
    });

    // append to container:
    $('.appendedContainer').append(link);
            
    // set on click function:
    link.click(function() {

      // do something with mock:
      console.log(mock);

    });
             
    ...

  }
});