Question

我不知道这个问题的确切标题。但我想问..

<div id="listInserts">
   <div>tes <a class="del" rel="54" href="#">X</a></div>
</div>

我有一个像这样的jquery脚本

$.get('dashboard/xhrGetListings', function(o) {

    for (var i = 0; i < o.length; i++)
    {
        $('#listInserts').append('<p>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">X</a></p>');
    }

    $('#listInserts').on("click",".del",function() {
        delItem = $(this);
        var id = $(this).attr('rel');

        $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
            delItem.parent().remove();
        }, 'json');
        return false;
    });
}, 'json');

以上脚本仅对我有用。我希望当单击选择器.del的集合中的项目时，将删除id=listInserts上的可用数据而不重新加载页面。该项目正在被删除，但页面正在重新加载。

Answer 1

如果您想阻止网页重新加载，请使用preventDefault()，例如

$('#listInserts').on("click",".del",function(evt) {
  evt.preventDefault(); //prevents page from being reloaded
  .....

Answer 2

你的代码没有重新加载

但是尝试在你的get事件中发布“on”处理程序

//get
$.get('dashboard/xhrGetListings', function(o) {
for (var i = 0; i < o.length; i++)
 {
  $('#listInserts').append('<p>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">X</a></p>');
 }
 }, 'json');

//on
$('#listInserts').on("click",".del",function() {
delItem = $(this);
var id = $(this).attr('rel');

$.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
    delItem.parent().remove();
}, 'json');
return false;
 });

单击时删除元素

2 个答案: