CODEWITHSUNDEEP
javascriptjquery
Rafael Spessotto
Rafael Spessotto

Reputation: 161

Pass jquery object to javascript onclick

I'm trying to do this:

var linha = $(this).parent().parent()

$("#modal-footerMsg").append(
         "<button type='button' id='btnOK' 
                       class='btn btn-md' onclick='RemoveLinha(" + linha + ");'> OK");

which will execute this function:

function RemoveLinha(element) {
    element.parent().parent().remove();
}

how can i do this? Pass the jquery object to the function?

Upvotes: 0

Views: 129

Answers (2)

Sultan Khan
Sultan Khan

Reputation: 318

Hi attach event listener after appending your HTML like this

$(document).ready(function(){
var linha = $("#removeElm")
$("#modal-footerMsg").append("<button type='button' id='btnOK' class='btn btn-md'> OK</button>");

$("#btnOK").on("click",function(){
RemoveLinha(linha);
})

function RemoveLinha(element) {
    element.remove();
}
})

Upvotes: 2

Rhumborl
Rhumborl

Reputation: 16609

Currently you are trying to put a jQuery object - literally an object, not a string representation of it - into a string. This won't work.

You are already using jQuery, which is great for constructing elements and creating event handlers on those elements, without reverting to setting inline strings of onclick="". Create the button element separately, setup the click event handler, then append it to the modal:

// get parent element
var linha = $(this).parent().parent();

// create a button
var button = $('<button type="button" id="btnOK" class="btn btn-md" />');

// add click event handler to button
button.click(function() { RemoveLinha(linha); });

// append button and text to modal
$("#modal-footerMsg").append(button, "OK");

Or if you want to be concise but messy:

var linha = $(this).parent().parent();

$("#modal-footerMsg").append(
    $('<button type="button" id="btnOK" class="btn btn-md" />')
        .click(function() { RemoveLinha(linha); }),
    "OK"
);

Upvotes: 1

Related Questions