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和從服務器

回答

相關問題