Question

我要做的是，将另一个文件（比如说new_machine.php）的输入表单加载到我的index.php中。在这种形式中，我有一个带有下拉列表的输入，它从MySQL数据库中获取选项并将它们列为锚点。这很好。然后我想用jQuery的.click（）方法控制用户的输入，所以当点击某个锚点时，我就能得到它的文本并将其设置为下拉按钮的值。但是，由于似乎没有触发jQuery的操作，因此不会发生这种情况。所以我的问题是如何在我的index.php中加载的部分.html / .php中使用jQuery。我的文件看起来像这样：

new_machine.php - 表单 - 我知道下拉列表没有输入，我只是想让按钮显示文本，所以我知道jQuery有效。

<div class="tab-content">

... some text inputs

<label>
    Purchase date<span class="req">*</span>
</label>
<input type="date" required=""  />


<label>
    Machine<span class="req">*</span>
</label>

    <div class="dropdown">
        <button id="chosenGroup" class="dropbtn">Choose machine</button>
        <div class="dropdown-content" id="machineList" >
            <?php
                session_start();
                try {
                    $bdd = new PDO('mysql:host=******:****; dbname=track', '*****', '*****');
                } catch(Exception $e) {
                    exit('Unable to connect to db.');
                }

                $sql = "SELECT * FROM machinegroup WHERE UserID=:uid";
                $q = $bdd->prepare($sql);
                $q->bindParam(':uid', $_SESSION['valid_user']);
                $q->execute();
                while ($row = $q->fetch(PDO::FETCH_ASSOC))
                {
                    echo "<a href=\"#\" class=\"machineGroupClick\">". $row['Name'] ."</a>";
                }   
            ?>
        </div>
    </div>


<script>    
$(document).ready(function(){
    $('.machineGroupClick').click(function(){
        var name = $(this).html();
        $( '#machine-content' ).text('lalal');
        $('#chosenGroup').html(name);
    });
}); 
</script>           


</div>

的index.php

<head>
...
<script src="https://code.jquery.com/jquery.js"></script>
<script src="machines/js/data.js"></script>
...
</head>

<body>
...
<a href="#" id="new-machine">...</a> 

...

<div id="machine-content" class="col-md-9" style="float:right">

...

</body>

data.js（这是处理我的index.php中的点击和其他事件的jQuery脚本）

$('#new-machine').click(function(){ 
    $( '#machine-content' ).load('new_machine.php');
});

我也尝试将new_machine.php中的jQuery代码放在index.php和data.js中，但它从未起作用。所以我的问题是在加载部分html / php时使用jQuery的正确方法是什么？我错过了一些关键的东西吗如果代码都是index.php并且未加载，则下拉工作正常，但我希望它在用户单击“新机器”时加载内部页面。干杯

Answer 1

data.js应如下所示：

$(document).ready(function(){
    $('#machine-content').on('click','.machineGroupClick',function(){//use event delegation here because your html is in the partial and it is loaded after the dom ready
        var name = $(this).html();
        $( '#machine-content' ).text('lalal');
        $('#chosenGroup').html(name);
    });
    $('#new-machine').click(function(){ 
    $( '#machine-content' ).load('new_machine.php');
    }); 
});

JavaScript / JQuery无法在加载了load（）的html中工作

1 个答案: