使用动态链接触发ajax答案

【问题标题】：Using dynamic links to trigger ajax使用动态链接触发ajax
【发布时间】：2016-07-27 18:08:56
【问题描述】：

我有几个链接想通过 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文件中的一个操作。

有什么想法吗？

【问题讨论】：

这有点令人困惑，您只是在问如何将 ID 连接到 URL 中，或者如何使事件处理程序与动态元素 （事件委托） 一起工作？
您需要先退后一步，注意按钮单击操作之间的常见逻辑是什么，然后编写代码以重复该操作。您没有真正为某人提供足够的信息来帮助您 - 我们需要查看您发送的请求的几个示例，以了解它们之间的相同/不同之处
对不起，我想我可以在最后添加一个问题并同时问两个问题。我会继续删除它。
Get parameter values from href in jquery的可能重复
@RoryMcCrossan 我是这个 ajax 技术的新手。我不明白你在问什么。我的印象是 "$('#result').load" 是 ajax 调用

标签： javascript php jquery ajax

【解决方案1】：

我会建议，您使用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()

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

您可以使用 on 将事件映射到动态加载的元素：

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

见http://api.jquery.com/on/

【讨论】：

【解决方案4】：

你可以使用jQuerystarts 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>

【讨论】：

【解决方案5】：

试试这个选择器；

$('[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>

【讨论】：

我的朋友回答得很好！