Click event added to appended html; element not working as anticipated

245
December 10, 2016, at 2:09 PM

OK I am sure I am doing something simple fundamentally wrong but am unable to resolve this issue on my own. I have tried googling and searching this forum and reading through the relevant parts of the jquery documentation.

If you need any further information please let me know. Many thanks in advance.

What I am trying to do:

I have a table showing details of various tests at the bottom of which I have a button to ad a new test. As each test comprises several rows of the table I have a template in a hidden div which I have cloned and appended to the live table. I am the using jquery to add appropriate classes and ids based on a variable integer for the sake of uniqueness. I am also attempting to add a click event to an image within one of the table cell to delete the rows relating to that particular test.

My current function

function newTest(sampleID){
    var testID = $("#testCount").val();
    $("#newTest tr").clone(true)
        .addClass("test"+testID)
        .appendTo("#testsTable"+sampleID);
    $(".newdelbox:first")
        .attr("id","testDelete"+testID)
        .addClass("delbox")
        .removeClass("newdelbox");
    $(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
    testID++;
    $("#testCount").val(testID);
}

What I need to happen

Function to be called when image is clicked.

What is happening

Function is called only when script is assigned (not clicked). Function will not subsequently run when clicked. I am seeing no errors within the console.

What I have tried

chained to preceeding code:

.click(delSample(testID));
.on("click",delSample(testID));
.bind("click",delSample(testID));

As new line within function:

$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
document.getElementById("testDelete"+testID).onclick(delSample(testID));
document.getElementById("testDelete"+testID).addEventListener("click",delSample(testID),false);
Answer 1

try this:

 .click(function(){
  delSample(testID);
  });

OR

.on("click",function(){
   delSample(testID);
  });
Answer 2

i do not know of your html but i supose something like

.on("click",function(){
   var current_id = jQuery(this).attr('id');
   delSample(current_id);
});

just locate your id

Rent Charter Buses Company
READ ALSO
Parse nested json in jquery and display in HTML page

Parse nested json in jquery and display in HTML page

I need to parse the below json and display in a html page

402
Reload content of DIV using XML as source

Reload content of DIV using XML as source

I'm trying to create a news style marquee at the bottom of my XSL page that shows some information it retrieves from an XML fileWhat I want it to do is automatically refresh the content of only this marquee without the meta refresh of the whole page

362
Hiding a PDF in html for download on link click

Hiding a PDF in html for download on link click

I am facing a situation in my application where i need to add a pdf download link on to my page, but i cannot refer to any relative or absolute path for the file, I need to host my pdf inside the html only

298
Cannot set focus on input text type in TinyMCE in Google Chrome

Cannot set focus on input text type in TinyMCE in Google Chrome

i cannot set focus on textbox when I click on it,only on google chrome

387