Question

我有几个链接，我想通过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文件中触发一个操作，具体取决于我点击的链接。

有什么想法吗？

Answer 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()

Answer 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>

Answer 3

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

Answer 4

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

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

请参阅http://api.jquery.com/on/

Answer 5

尝试此选择器;

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

＆＃13;

$(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()

＆＃13;

<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>

＆＃13;

使用动态链接触发ajax

5 个答案: