jQuery和从服务器

我的HTML代码具有约100的div和超链接加载HTML代码替换的超链接，其几乎是相同的：jQuery和从服务器

<div><a href="#" onclick="load_edit(1, 1);" class="painike">Edit 1</a></div> 
<div><a href="#" onclick="load_edit(1, 2);" class="painike">Edit 2</a></div>

我jQuery代码应该从服务器加载load_edit.php和替换的超级链接其中称为功能。无论如何，我的代码不会用HTML代码取代超链接，我不知道原因。哪里不对？另一方面，因为我有大约100个调用同一个函数的超链接，所以很高兴听到，这可以做得更好。我想摆脱我的内联JavaScript代码并改进功能。

来源

2016-07-22 xms

在您的代码中，$(this)未引用被单击的DOM元素。
欲了解更多信息，请参阅What context is the jQuery.post callback function invoked in?

当您创建一个匿名函数，它会稳守在同一范围内的所有局部变量，而不是this，由JavaScript本身设置（全局对象）或被调用时被覆盖。
— Yehuda Katz

我建议绑定一个单击处理程序与相应类别的所有环节。然后，在进行AJAX调用之前定义对单击元素的引用。这个局部变量将在匿名的“done”函数中可用。

我也建议使用data attributes来定义每个链接的变量。这些数据可以通过使用jQuery的data()方法从DOM中检索。

jQuery('.painike').on('click', function(e) { 
 
    
 
    e.preventDefault(); 
 

 
    var $this = $(this), 
 
     kaavio = $this.data('kaavio'), 
 
     ottelu = $this.data('ottelu'); 
 

 
    jQuery.post("//posttestserver.com/post.php", { 
 
     kaavio: kaavio, 
 
     ottelu: ottelu 
 
    }).done(function(data) { 
 
     $this.replaceWith(data); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><a href="#" class="painike" data-kaavio="1" data-ottelu="1">Edit 1</a></div> 
 
<div><a href="#" class="painike" data-kaavio="1" data-ottelu="2">Edit 2</a></div>

下面是另一个看似相关的职位，虽然它不完全是一个重复：
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

来源

2016-07-22 17:25:01 showdev

非常感谢！如何在我的超链接上使用href =“＃”。更好的方法？ – xms

我觉得'＃'很好，但有[意见]（http://stackoverflow.com/questions/134845/which-href-value-to-use-for-javascript-links-or-javascriptvoid0）。您可能想通过使用['preventDefault（）']（https://api.jquery.com/event.preventdefault/）或'return false;'取消链接的默认操作。如果你真的想要适应，你可以链接到一个页面，解释JavaScript是必需的。 – showdev

我不得不添加$（document）.ready（function（）{（不知道原因），然后你的代码完美地工作！非常感谢。 – xms

里面你.done()回调，this并不是指所点击的元素。相反，您可以将元素参考传递到load_edit()。

<div><a href="#" onclick="load_edit(1, 1, this);" class="painike">Edit 1</a></div> 
<div><a href="#" onclick="load_edit(1, 2, this);" class="painike">Edit 2</a></div> 

function load_edit(kaavio, ottelu, element) { 
    $.post("load_edit.php", { kaavio: kaavio, ottelu: ottelu }) 
     .done(function (data) { 
      $(element).replaceWith(data); 
     }); 
}

来源

2016-07-22 17:26:54

jQuery和从服务器

回答

相关问题