My focusin doesn't work for my appended input element

Question

My program has a dynamic table which structure is:

<table id="selectedItems">
</table>

and i will append it using jquery :

var i=0;
    $("#selectedItems").html('');
    $("#selectedItems").append(
            '<tr>' +
            '<th width="30px"><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"form-delete")?></th>'+
            '<th width="115px"><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"invoice-qty")?></th>'+
            '<th><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"invoice-item")?></th>'+
            '<th><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"invoice-price")?></th>'+
            '<th><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"invoice-discount")?></th>'+
            '<th><?=loadLanguage("admindisplay",$this->session->userdata("jw_language"),"invoice-subtotal")?></th>'+
            '</tr>'+
            '<tr>'+
                '<td></td>'+
                '<td class="qty"><input type="text" name="qtyPriceEffect'+i+'" class="required number qty" id="qtyItem'+i+'" value="0"/></td>'+
                '<td></td>'+
                '<td><input type="text" name="prcPriceEffect'+i+'" class="required currency qty" id="prcItem'+i+'" value="0"/></td>'+
                '<td><input type="text" name="dscPriceEffect'+i+'" class="required number qty" id="dscItem'+i+'" value="0"/></td>'+
                '<td id="subTotal'+i+'">0</td>'+
            '</tr>'
);

and i have a function :

$("input[type='text'][name*='PriceEffect']").focusin(function(){
    alert("a");
});

but it doesn't work for my appended input text. if i provide the input text from the start (not dynamic), it works. someone please help me.

score 0 · Accepted Answer · answered May 14 '14 at 07:58

0

You need to use event delegation for attaching events to dynamically added elements:

$("#selectedItems").on("focusin","input[type='text'][name*='PriceEffect']",function(){
    alert("a");
});

answered May 14 '14 at 07:58

Felix

37,892
8
43
55

sorry for adding more question. do you know how can i get the selectedItems id or name ? cause i cant use .attr – go eng chun May 14 '14 at 09:24
You can use `this.id` or `this.name` inside the handler. – Felix May 14 '14 at 09:29
thank again. i made a mistake by using $this.id – go eng chun May 14 '14 at 16:52

My focusin doesn't work for my appended input element

1 Answers1