Question

I am trying to call a jQuery action within a div (subpage) that was generated by JavaScript. I pretty new at this so bear with me.

In the index.html I am populating a div, via a JavaScript load command.

    <ul>
            <li><a href="./data/new_group_form.php" onclick="load('./data/new_group_form.php','content');return false;">Add new Group</a></li>
            <li><a href="./data/list_group.php" onclick="load('./data/list_group.php','content');return false;">List Groups</a></li>
    </ul>

    <div id="content"></div>

Then on the page that is generated (which isn’t a full HTML page, just a form).

<?php
    include "../incl/db_class_inc.php";
?>

<script>
    $('input').live('click', function(){
        $("input:.datepicker").datepicker();
    });
</script>

<form action="./data/save_group.php" method="post" enctype="application/x-www-form-urlencoded">
<hr>
<table>
    <tr>
        <td>Group number:</td>
        <td><input type="number" name="name" required /></td>
    </tr>
    <tr>
        <td>Start date:</td>
        <td><input type="date" name="start_date" class="datepicker" required /></td>
    </tr>
    <tr>
        <td>End date:</td>
        <td><input type="date" name="end_date" class="datepicker" /></td>
    </tr>

I am trying to run a jQuery script, and it will not run for anything. I know it has something to do with the .live() function right?

How do I get this jQuery function to run in the new DIV that is created?

Answer 1

Your selector is wrong:

$("input:.datepicker").datepicker();

You need to delete the :

$("input.datepicker").datepicker();

Note that live is deprecated, if you’re using jQuery version 1.7+ use the on function instead

$('body').on('click', 'input',function(){
    $("input.datepicker").datepicker();
});

Replace body with the closest static element that holds the dynamic inputs (div\form)

Move the inline scripts to the js file (separate of concerns). The HTML should only take care of the presentation of the page, not on the scripts at all.