My button isn't working

Question

I have some html in my JS and everything but the button works. The input button appears but when I click it, nothing happens.

function updateFavourite(video) {
document.getElementById("favourite").onclick = function () { 
blacklist[video["id"]] = true;
myfavourite.push(video);

var html = 
    "<input onclick='remove(video);' value='Remove' type='button'></input>" +
    "<li class=\"saved\">" +
    "<img class= \"img-rounded\" src=\"{0}\"/>" +
    "<p><b title=\"{2}\"><a class=\"extendedLink\" href=\"javascript:watchFavouriteVideo(\{1}\)\"><span></span>{2}</a></b><br>" +
    "by {3}<br>" +
    "{4} | {5} views</p>" +
    "</li>";

$("#myfavourite").prepend(html.format(video["thumbnail"],
video["id"],
video["title"],
video["uploader"],
video["length"],
video["views"]));
setVideoF(video);
}
}

Method to call:

function remove (video) { 
alert('Favourites removed');
}

score 0 · Accepted Answer · edited May 23 '17 at 12:20

It looses its access to video variable, remove the onclick attribute and use jQuery to bind its event, and also use JavaScript Closure to keep the video variable safe:

function updateFavourite(video) {
    var clickFunc = (function (video) {
        return function () {
            blacklist[video["id"]] = true;
            myfavourite.push(video);
            var html =
                "<input class='removeButton' value='Remove' type='button' />" +
                "<li class=\"saved\">" +
                "<img class= \"img-rounded\" src=\"{0}\"/>" +
                "<p><b title=\"{2}\"><a class=\"extendedLink\" href=\"javascript:watchFavouriteVideo(\{1}\)\"><span></span>{2}</a></b><br>" +
                "by {3}<br>" +
                "{4} | {5} views</p>" +
                "</li>";
            $("#myfavourite").prepend(html.format(video["thumbnail"],
            video["id"],
            video["title"],
            video["uploader"],
            video["length"],
            video["views"]));
            $("#myfavourite .removeButton").click(function () {
                remove(video);
            });
        };
    })(video);
    document.getElementById("favourite").onclick = clickFunc;
}

score 0 · Answer 2 · answered Feb 26 '14 at 12:08

Your code is generating a dynamic html so click event is not registering properly. A little html updated required. Use the "removeVideo"class to your button and use the jquery to register the click event for dynamic element.

    $('body').on('click','.removeVideo', function(){
        $(this).val("Clicked");
    });

Insted of $('body') you can use the closest(but not dynamic element) parent.

My button isn't working

2 Answers2