Cleaner approach to bind an event to dynamic generated element in Jquery

Instead of binding an event in a single line  using Traditional approach which actually difficult to parse quotes , commas and values :
"<td><a href='#'><span id='showHidelinkText"+ id + "' onclick='openJsonData(\"" + id+ "\");return false;'>Show JSON</span></a></td>"



We can use the following approach which appends the child elements to the parent and then append into DOM. After appending the new element into DOM, we can bind on() method on element selector.
Event handlers attached using the on() method will work for both current and FUTURE elements.
This way we can overcome the difficulty for adding or removal of the  parameters & attributes in the dynamic generated section.



var formId = "batchclosurestatusForm";
    var action = "forceCloseStatus";

    if (txnJson != null) {
        var txnObj = $.parseJSON(txnJson);
       
       
            var actionTDElement = $("<td></td>");
            var spanElement = $("<span id="+txnObj._id+" class='iconSpan' > </span>");
           
            var iconElement =  $(document.createElement("a"))
                            .attr({ href: '#'})
                            .addClass("forceClosureAction")
                            .append($("<i class='fa fa-toggle-on' aria-hidden='true'></i>"));
                          
           
            spanElement.append(iconElement);
            actionTDElement.append(spanElement);
       
        rowCount++;
        var newTableRow =
            "<tr id='" + txnObj._id+ "DataRow' class='dataRow'>"
           
                +"<td>"    + txnObj._id + "</td>"
                +"<td>" + txnObj.device_code +"</td>"
                +"<td>" + txnObj.force_closure_by + "</td>"
                +"<td>" + actionTDElement.html() + "</td>"
                   
            +"</tr>";

   
        $('#batchClosureLogTable').append(newTableRow);
        $("#"+txnObj._id).on('click',function(){
            // Do something
           
            alert("hello");
           
        });

$(this) always works on iteration

You cannot access  an element with $(this)  at event binding like this:

<select onclick="fun()">
....


fun()
{
 $(this).each(function ( )
{

.....

........

Reason : It works in iteration to refer to the element
                    $("select#"+id+" option:selected").each(function ( )
                   {
                          if($(this).val() =="Defined" )
                           {
   
                                    str=str+$(this).val();

                                   .............................

or you can also use that element at finction calling like this.....

<select id="xyz" onclick="fun(this.id)">

Tp calculate size of element

count = 0;
           
$("#SelectClientForExport option").each(function ( )
{
count++;
});
alert(count);


or either use

alert( $("#SelectClientForExport option").size());

Value,text and index (intersting way to handle form elements)

To reset fields we can use: either

val()
text( )
index( )

Generally we usually  access elementseither by following selector

1.using id
2.using group selector like all select elements
3. using class name

but we can also access element with the help of text,index and value

difference in empty() and remove()

• Empty will remove all the contents of the selection.
• Remove will remove the selection and its contents.

Consider:

<div>
    <p><strong>foo</strong></p>
</div>

$('p').empty();  // --> "<div><p></p></div>"

// whereas,
$('p').remove(); // --> "<div></div>"