如何在 AJAX 之后使 innerHTML 中的 javascript 工作

Question

我正在制作一个投票系统。用户单击这些按钮（div）后，将调用 ajax 将数据传递到另一个页面，执行 SQL 插入会话 ID、投票值、投票 ID 并显示新的总数
这是我的ajax

$('.like').on('click', function(){
    var voteclass=2;
    var vote_id=$(this).parent().attr("id");
    var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
    $.ajax({
    url:"insert.php",
    cache:0,
    data:poststr,
    success:function(result){
    $('#'vote_id).html(result);}  });   });

在ajax后，insert.php做SQL，结果显示与投票div内容相同fontpage 但具有新的总值。
我的问题是如果不刷新整个页面我就不能再次投票。这是否意味着 innerHTML 无法在外部（我不知道是什么术语）页面的 head 元素内加载脚本？我该如何解决？

Answer 1

需要使用on()函数，更改：

$('.like').bind('click', function(){

到

$('body').on('click','.like', function(){

当然，我假设您向我们展示的脚本片段包含在：

$(document).ready(function(){
   ...
});

也改变这个：

var vote_id=$(this).parent().attr("class");

至：

var vote_id=$(this).parent().attr("id");

Answer 2

试试这个..

 $('.like').on('click', function(){
        var voteclass=2;
        var vote_id=$(this).parent().attr("class");
        var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
        $.ajax({
            url:"insert.php",
            cache:0,
            data:poststr,
            success:function(result){
                $('#vote_id').html(result);
            }
        });  
 });

Answer 3

我想我只需要添加一个答案：Working Fiddle

Javascript:

我将整个逻辑包装在 document.ready 中以确保 DOM 已完全加载，我假设您也这样做了。

我还使用 'on' 而不是 'bind'，因为这是 jQuery 他们当前库的首选方法。

我的 ajax 调用是对 jsFiddle 的模拟 ajax 调用，但您可以将 url 替换为您的 index.php.

成功时我使用了 $('.'+vote_id) 因为你得到了父级的 'class'，所以你需要一个 '.'而不是 jquery 选择器中的“#”。如果我是你，我会将变量 'vote_id' 更改为 'parentVoteClass'.

最后，我使用了 'append'，因为您不想丢失父标签中现有的 html。这会将结果中的值添加到父元素中现有 html 的末尾。如果您使用 prepend(result) 它将把它放在第一位并使用 .html(result) 将替换它。

 $(document).ready(function() {
        $('.like').on('click', function(){
            var vote_teacher = 1;
        var voteclass = 2;
        var vote_id = $(this).parent().attr("class");
        var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: poststr,
            cache: false,
            success: function(result) {
                var someDatafromResult = "my stuff";
                $('.'+vote_id).append(someDatafromResult);
            }
        });
    });
});

HTML:

<div id="parent" class="parentClass">
<a href="#" class="like">Vote!</a>    
</div>

更新：

我修改了你的fiddle：Modified Fiddle

主要变化在这里：

function main(){
$('#something').on('click','.agree', function(){...code hidden...}

这允许您在父元素上绑定事件，您也可以使用 document 而不是“#something”。现在，如果你 html 和 'agree' class 被替换或被淘汰，偶数仍然存在。

我在这里伪造成功phpreturn:

success:function(result){            
           $('#'+des_id+'').html('<li>text    <span class="votes_type ">    <a href="#!" class="agree">'+voteNumber+'<img src="png"></a>    <a href="#!" class="disagree">disagreenumber<img src="png"></a> </span>    </li>   ');
           ;}

我使用一些内联字符串 html 来伪造 html return 结果，然后使用变量 'voteNumber'，每次点击它都会增加，以表明它确实如此确实改变并继续工作。

如何在 AJAX 之后使 innerHTML 中的 javascript 工作

How to make javascript in innerHTML work after an AJAX

javascript

php

ajax

jquery

innerhtml