Передать функцию по ссылке в событии onclick Javascript

Question

Я использую javascript, jQuery. Мне нужно передать function по ссылке в событии onClick.
Вот что я пытаюсь, но не работаю.

function onClickHandler() {
    console.log("on click handler");
}

function renderButton(callback) {
    $("#root").append(
        '<div style="text-align:right; padding:10px 10px;">\
            <button onclick="' +
        callback +
        '">Collect Hadiths</button>\
        </div>'
    );
}

renderButton(onClickHandler);

Подскажите, пожалуйста, что я делаю не так.

Answer 1

Вам нужно добавить обработчик onclick после того, как вы добавили свою кнопку в DOM.

function onClickHandler() {
    console.log("on click handler");
}

function renderButton(callback) {
    $("#root").append(
        '<div style="text-align:right; padding:10px 10px;">\
            <button id="button">Collect Hadiths</button>\
        </div>'
    );
    $("#button").click(callback);
}

renderButton(onClickHandler);

Answer 2

Я бы использовал:

function onClickHandler() {
    console.log("on click handler");
}

function renderButton(callback) {
    // Create the button and add the click event
    const button = $('<button>Collect Hadiths</button>');
    $(button).click(callback);

    // Create the div and append the button to it
    const div = $('<div style="text-align:right; padding:10px 10px;"></div>');
    $(div).append(button);

    // Now add to the root
    $("#root").append(div);
}

renderButton(onClickHandler);

Answer 3

Добавьте событие щелчка к сгенерированному элементу, используя приведенный ниже код

function onClickHandler() {
    console.log("on click handler");
}

function renderButton(callback) {
    $('<div style="text-align:right; padding:10px 10px;">\
            <button>Collect Hadiths</button>\
        </div>'
    ).appendTo("#root").find('button').click(callback);
}

renderButton(onClickHandler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root"></div>