CODEWITHSUNDEEP
javascriptjquery
mingfish_004
mingfish_004

Reputation: 1413

how to active new input elements to bind blur function?

how to active new input elements to bind blur function?

sometimes I bind some functions on the document ready , when blur , focus , click , mouseover or other actions it will doing something in js. but this bindings do not works for new added elements, how can I bind functions to new added elements?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="box">
    <input type="text" name="a" value="a" />
    <input type="text" name="b" value="b" />
</div>
<button onclick="live_blur()">live_blur</button>
<script type="text/javascript">
    $(function(){
        $('[name]').blur(function (){
            alert(this.value);
        })
    });

    function live_blur(){
        $('.box').append('<input type="text" name="c" value="c" />');
        // how to acitve new inputs when blur and alert value
    }
</script>

Upvotes: 0

Views: 181

Answers (3)

qiu-deqing
qiu-deqing

Reputation: 1333

you need to add an event listener to the newly created element

var input = $('<input type="text" name="c" value="c" />'); // create new <input>

$(".box").append(input); // append to your destination

input.on("blur", function () {
    console.log(this.value);
}); // register event listener

http://jsfiddle.net/zvuc6/

Upvotes: 1

Виктор Новиков
Виктор Новиков

Reputation: 291

I can recommend to you, initialize your tooltip() again, after dyn.adding new elements

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Attach the event to the document using the on function. The first argument is the event, the second specifies the target to execute the event for and the final argument is the function to execute (event handler).

   $(document).on('blur', '[name]',function (){
        alert(this.value);
    });

JS Fiddle: http://jsfiddle.net/ZWkEn/

Upvotes: 1

Related Questions