How to convert .live() to .on() in WordPress

  • Mineshrai

    (@mineshrai)


    6 years, 9 months ago

    I have following set of JS code in my wordpress site. Currently it is working fine. But since .live() is deprecated from JS library, I want it to convert into .on().

    I tried various combinations but got no luck. Plz help me in getting the following code converted into .on().

    <div id="extender"></div>
    <p><a href="#" class="button" id="add">Add Reward</a></p>

<script type="text/javascript">

    jQuery(document).ready(function( $ ){

    //fadeout selected item and remove
    $('#remove').live('click', function(event) {
        event.preventDefault();
        $(this).parent().fadeOut(300, function(){ 
            $(this).empty();
            return false;
        });
    });

    var rows = '<p><label for="amount"><b>Amount</b></label> <input type="number" style="width:100%" name="reward[]" value="" required /> <label for="est_date"><b>Est. Date</b></label> <input type="text" style="width:100%" class="datepicker" name="reward_est_date[]" value="" required /> <a href="#" class="button" id="remove">Remove</a></p>';    

    //add input
    $('#add').click(function() {
        $(rows).fadeIn("slow").appendTo('#extender'); 
        i++;    
        return false;
    });

    $('.datepicker').live('click', function() {
        $(this).datepicker('destroy').datepicker().focus();
    });

    });

</script>

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • kjodle

    (@kjodle)

    6 years, 9 months ago

    Have you read this: http://api.jquery.com/live/ ?

    Technically, that’s jQuery, not straight-up JavaScript.

    Thread Starter Mineshrai

    (@mineshrai)

    6 years, 9 months ago

    Hi @kjodle,
    Thanks. I already gone through the it but was not able to convert it. Plz help me with the modified code.

    kjodle

    (@kjodle)

    6 years, 9 months ago

    That page explains the difference between how these two functions work.

    Deprecated:

    $( selector ).live( events, data, handler );

    jQuery 1.7+

    $( document ).on( events, selector, data, handler );

    So your new code should be something like:

    $(document).live( '#remove', 'click', function(event) {

    Where exactly are you getting stuck? You are not asking a specific question that has a specific answer. When you try something, are you looking at the console in developer tools to see what kind of error you are getting? If so, let us know what that error is.

    Thread Starter Mineshrai

    (@mineshrai)

    6 years, 9 months ago

    Thanks @kjodle,
    A slight change in your code has worked. THANKS. Following is the code for other who may stuck with the same issue.

    <div id="extender"></div>
    <p><a href="#" class="button" id="add">Add Reward</a></p>

<script type="text/javascript">

    jQuery(document).ready(function( $ ){

    //fadeout selected item and remove
    $(document).on('click', '#remove', function(event) {
        event.preventDefault();
        $(this).parent().fadeOut(300, function(){ 
            $(this).empty();
            return false;
        });
    });

    var rows = '<p><label for="amount"><b>Amount</b></label> <input type="number" style="width:100%" name="reward[]" value="" required /> <label for="est_date"><b>Est. Date</b></label> <input type="text" style="width:100%" class="datepicker" name="reward_est_date[]" value="" required /> <a href="#" class="button" id="remove">Remove</a></p>';    

    //add input
    $('#add').click(function() {
        $(rows).fadeIn("slow").appendTo('#extender'); 
        i++;    
        return false;
    });

    $(document).on('click', '.datepicker', function() {
        $(this).datepicker('destroy').datepicker().focus();
    });

    });

</script>
    kjodle

    (@kjodle)

    6 years, 9 months ago

    Glad you got it worked out. And an extra thank you for posting the code that worked.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to convert .live() to .on() in WordPress’ is closed to new replies.