引用被点击的锚标记:我做错了什么

Question

我一直收到

"无法读取未定义属性'split' "

，表示下面代码中的$(this)没有定义。为什么呢?

HTML:

<tbody>
   <tr>
      <td><a class='edit-link' id='jobid-3'>Motion Designer</a></td>
      <td>2015-07-21 11:06:57</td>
   </tr>
   <tr>
      <td><a class='edit-link' id='jobid-2'>Web Developer</a></td>
      <td>2015-07-21 09:53:36</td>
   </tr>
   <tr>
      <td><a class='edit-link' id='jobid-1'>Creative Team Manager</a></td>
      <td>2015-07-21 09:41:20</td>
   </tr>
</tbody>

JS:

<script type="text/javascript">
    jQuery('.edit-link').click(function() {
    {
        var thisJobId = jQuery(this).attr('id').split('-')[1];
        console.log("thisJobId = " + thisJobId); // test
    });
<script>

Answer 1

您的代码示例中没有事件绑定。

所以像这样使用

jQuery('.edit-link').on("click", function() {
    var thisJobId = jQuery(this).attr('id').split('-')[1];
    console.log("thisJobId = " + thisJobId); // test
});

Answer 2

工作代码:

为类附加一个点击处理程序:

$('.edit-link').click(function(){
   
        var thisJobId = jQuery(this).attr('id').split('-')[1];
        console.log("thisJobId = " + thisJobId); // test
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
   <tr>
      <td><a class='edit-link' id='jobid-3'>Motion Designer</a></td>
      <td>2015-07-21 11:06:57</td>
   </tr>
   <tr>
      <td><a class='edit-link' id='jobid-2'>Web Developer</a></td>
      <td>2015-07-21 09:53:36</td>
   </tr>
   <tr>
      <td><a class='edit-link' id='jobid-1'>Creative Team Manager</a></td>
      <td>2015-07-21 09:41:20</td>
   </tr>
</tbody>

Answer 3

您需要添加click事件属性:

jQuery('.edit-link').click(function(){
    var thisJobId = jQuery(this).attr('id').split('-')[1];
    console.log("thisJobId = " + thisJobId); // test
});

Answer 4

你需要修改javascript:

$('.edit-link').click(function(event) {
    var thisJobId = event.target.id.split('-')[1];
    console.log("thisJobId = " + thisJobId);
});

上面的函数在点击元素时执行。在事件对象中有一个target属性，它包含被点击的DOM元素。我正在检索它的id，只返回你需要的部分。

小提琴