如何在 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 并显示与 fontpage 相同的投票 div 内容但具有新的总值的结果。
我的问题是我不能再次投票刷新整个页面。这是否意味着 innerHTML 无法在外部（我不知道术语是什么）页面的 head 元素中加载脚本？我该如何解决？

Answer 1

我想我会添加一个答案：Working Fiddle

Javascript：

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

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

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

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

最后，我使用了“附加”，因为您不想丢失父标记中现有的 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>

更新：

我修改了你的小提琴：Modified Fiddle

主要变化在这里：

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

这允许您在父元素上绑定事件，而不是“#something”，您也可以使用文档。现在，如果您使用 'agree' 类的 html 被替换或炸毁，甚至仍然存在。

我在这里伪造了成功的php返回：

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 返回结果，然后使用变量“voteNumber”随着每次点击而增加，以表明它确实发生了变化并继续工作。

Answer 2

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

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

到

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

当然，我假设您向我们展示的 sn-p 脚本包含在：

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

也改变这个：

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

到：

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

Answer 3

试试这个..

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