使用動態鏈接觸發阿賈克斯

我有幾個鏈接，我想通過Ajax觸發操作，但我不知道如何繼續這個問題。我曾經爲靜態鏈接解決過這個問題，但我的鏈接是動態的，在不同階段會有不同的鏈接數量。使用動態鏈接觸發阿賈克斯

我有一個index.php文件看起來像這樣：

<script src="../jquery-3.1.0.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#link1").click(function(e) { 
    e.preventDefault(); 
    $('#result').empty().text('Executing command...'); 
    $('#result').load('ajax.php?op=edit&id=4', function(){   
     $('#result').before("The server answered:"); 
     $('#result').after("The operation was a success<br>"); 
    }); // end load 
    }); //end click 
}); //end ready() 
</script> 

<div id='result'></div> 
<a id='link1' href='#'>Link 1</a><br> 
<a id='link2' href='#'>Link 2</a><br> 
<a id='link3' href='#'>Link 3</a><br> 
<a id='link4' href='#'>Link 4</a><br> 
<a id='link5' href='#'>Link 5</a><br> 
<a id='link6' href='#'>Link 6</a><br>

而「Ajax」的文件是這樣的：

<?php 
if(isset($_GET['op']) && isset($_GET['id'])) { 
    $op = $_GET['op']; 
    $id = $_GET['id']; 
    switch($op) { 
     case "edit": 
      // do operations here 
      echo $id; 
      break; 
     case "doSomethingElse": 
      // do other operations here 
      echo $id; 
      break; 
    } 
} 
?>

所以我現在用奮鬥是：我如何解決這個問題，所以我不必定義jquery ready（）函數中的每個鏈接？

編輯：基本上我需要在ajax.php文件中觸發一個操作，具體取決於我點擊的鏈接。

任何想法？

來源

2016-07-27 DaveLar

這是一個有點混亂，你只是問如何連接標識加入URL，或如何使事件處理程序使用動態元素*（事件委託）*？ – adeneo

您需要退後一步，並注意按鈕點擊操作之間的共同邏輯是什麼，然後編寫代碼以重複該操作。您沒有真正提供足夠的信息讓某人幫助您 - 我們需要查看您發送的兩個請求的示例，以瞭解它們之間的相同/不同之處 –

對不起，我想我可以添加一個問題最後問兩個問題。我會繼續並將其刪除。 – DaveLar

-1

試試這個選擇器;

$('[id^="link"]')

$(document).ready(function() { 
 
    $('[id^="link"]').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#result').empty().text('Executing command...'); 
 
    $('#result').load('ajax.php?op=edit&id=4', function(){   
 
     $('#result').before("The server answered:"); 
 
     $('#result').after("The operation was a success<br>"); 
 
    }); // end load 
 
    }); //end click 
 
}); //end ready()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div id='result'></div> 
 
<a id='link1' href='#'>Link 1</a><br> 
 
<a id='link2' href='#'>Link 2</a><br> 
 
<a id='link3' href='#'>Link 3</a><br> 
 
<a id='link4' href='#'>Link 4</a><br> 
 
<a id='link5' href='#'>Link 5</a><br> 
 
<a id='link6' href='#'>Link 6</a><br>

來源

2016-07-27 09:47:21

非常好的回答我的朋友！ – DaveLar

不客氣:) –

1）添加類，每一個環節

2）取單擊事件該類

$(".lnk").click(function(e) { // take click event for link 
 
    e.preventDefault(); 
 
    var id = $(this).attr("id").match(/\d+/); // get integer value from id so you will get id 
 
    alert(id) 
 
    $('#result').empty().text('Executing command...'); 
 
    $('#result').load('ajax.php?op=edit&id='+id, function(){   
 
     $('#result').before("The server answered:"); 
 
     $('#result').after("The operation was a success<br>"); 
 
    }); // end load 
 
    }); //end click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id='result'></div> 
 
<a id='link1' href='#' class="lnk">Link 1</a><br> 
 
<a id='link2' href='#' class="lnk">Link 2</a><br> 
 
<a id='link3' href='#' class="lnk">Link 3</a><br> 
 
<a id='link4' href='#' class="lnk">Link 4</a><br> 
 
<a id='link5' href='#' class="lnk">Link 5</a><br> 
 
<a id='link6' href='#' class="lnk">Link 6</a><br>

來源

2016-07-27 09:45:54

我會建議你使用data-*前綴自定義屬性存儲任意信息與可以在以後使用的元素。

<a class='link' href='#' data-key="1">Link 1</a>

然後使用您現有的點擊處理程序，您可以使用Element.dataset屬性來訪問數據。使用jQuery可以使用.data('key')方法實現相同的結果。

$(document).ready(function() { 
    //Use common class to bind the event handler 
    $(".link").click(function(e) { 
    var id = this.dataset.key; 
    e.preventDefault(); 
    $('#result').empty().text('Executing command...'); 
    $('#result').load('ajax.php?op=edit&id='+id, function(){   
     $('#result').before("The server answered:"); 
     $('#result').after("The operation was a success<br>"); 
    }); // end load 

    }); //end click 
}); //end ready()

來源

2016-07-27 09:46:42 Satpal

您可以使用jQuery starts with屬性選擇：

$('[id^="link"]')

$('[id^="link"]').click(function(e) { 
 
    e.preventDefault(); 
 
    console.clear(); 
 
    console.log('$(this).html():', $(this).html()); 
 
    // Your code... 
 
});

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

 
<div id='result'></div> 
 
<a id='link1' href='#'>Link 1</a><br> 
 
<a id='link2' href='#'>Link 2</a><br> 
 
<a id='link3' href='#'>Link 3</a><br> 
 
<a id='link4' href='#'>Link 4</a><br> 
 
<a id='link5' href='#'>Link 5</a><br> 
 
<a id='link6' href='#'>Link 6</a><br>

來源

2016-07-27 09:48:34

可以映射事件動態加載元素與on：

$("#staticParentContainer").on("click", "#dynamicElement", function() { 
    // up to you 
});

看到http://api.jquery.com/on/

來源

2016-07-27 09:50:02 Julien

使用動態鏈接觸發阿賈克斯

回答

相關問題