JavaScript / JQuery无法在加载了load()的html中工作

What I'm trying to do is, load an input form from another file (lets say that's new_machine.php) to my index.php. In this form I have an input with dropdown which gets options from MySQL database and lists them as anchors. And that works fine. I then want to control user's input with jQuery's .click() method, so when certain anchor is clicked I would be able to get it's text and set it to the value of dropdown button. However that doesn't happen since it seems that jQuery's actions are not triggered. So my question is how do I use jQuery in a partial .html/.php that I load in my index.php. My files look like this:

new_machine.php - the form - I know there is no input for dropdown, I just want to get the text shown in button so I know jQuery works.

<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 (this is jQuery script that handles click and other events in my index.php)

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

I did also try to put jQuery code from new_machine.php in index.php and in data.js but it never worked. So my question is what is the correct way to use jQuery when loading partial html/php? Am I missing something crucial? Dropdown works fine if the code is all index.php and is not loaded, but I want it to load inside page when user clicks "New machine". Cheers

dreamevil0002
dreamevil0002 对于动态生成的元素,使用on()方法绑定事件
4 年多之前 回复
duanqiao3608
duanqiao3608 在父index.php中
4 年多之前 回复

1个回答



data.js应如下所示:</ p>

  $(document).ready  (function(){
$('#machine-content')。on('click','。machineGroupClick',function(){//在这里使用事件委托,因为你的html在部分中并且在之后加载 dom ready
var name = $(this).html();
$('#machine-content')。text('lalal');
$('#chosenGroup')。html(name) ;
});
$('#new-machine')。click(function(){
$('#machine-content')。load('new_machine.php');
});

});

</ code> </ pre>
</ div>

展开原文

原文

data.js should look like this:

$(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');
    }); 
}); 

douzai2562
douzai2562 谢谢你,做到了。
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐