Question

我有功能：

 function delMeh() {
                console.log('prolazi klik');
var did = $(this).attr('data-value');
$.ajax({
            url: "delTmeh.php",
            type: "POST",
            async: true, 
            data: { vrednostid:did}, //your form data to post goes here as a json object
            dataType: "html",
            success: function(data) {
            $('#tablemeh').dataTable().fnDestroy();
        drawMeh();   
            },
             error: function(data) {
             console.log(data);
             }
        });
}

和HTML：

<i data-value="32" onclick="delMeh();" class="fa fa-times delMeh"></i>

所以，点击后我需要从数据库中删除第32行，但是如何获取点击元素的数据值... 我在delMeh（）函数中尝试使用：var did = $(this).attr('data-value');但不起作用。

如何在我需要调用函数时获取clicked元素的attr数据值？

Answer 1

为什么在使用内联函数点击时需要数据值？您可以直接将值作为参数传递给函数。

＆＃13;

    
    function delMeh(value) {
        // do your stuff
      }

＆＃13;

    <i onclick="delMeh(32);" class="fa fa-times delMeh"></i>

＆＃13;

这样做会很好，但我严重怀疑内联函数调用中this的用法，因为它可以在使用jquery事件监听器绑定元素事件时使用。

然后您可以使用$(this).data('value')

我希望这会有所帮助。

Answer 2

在onclick方法

上发送元素

onclick="delMeh(this);"

并在函数上接收元素

function delMeh(element) {

      // than you can get the value with
      var did = $(element).attr('data-value');
      // or
      var did = $(element).data('value');

}

或者你可以通过绑定你的html元素上的on click处理程序来实现jQuery方式：

$(".delMeh").click(function() {
    // here you could use this
    var did = $(this).attr('data-value');
});

您不需要在每个元素上设置内联onclick属性。

检查此问题以了解.attr vs. .data之间的区别。

Answer 3

function delMeh() {
   console.log('prolazi klik');
   var did = $(this).attr('data-value');
   alert(did);
}

$(".delMeh.fa.fa-times").click(delMeh);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i data-value="32" class="fa fa-times delMeh">test</i>

这使用更标准的addEventListener。 AddEventListener允许多个相同类型的事件，并将此参数传递给函数。它还可以防止覆盖内联事件。

Answer 4

你应该避免使用jQuery的内联事件处理程序。原因包括获取新的jQuery冒泡功能，不将事件注册代码与事件处理代码分开。

听起来您的元素是动态创建的，这可能是您之前尝试使用.on失败的原因（在您的评论中提到）。这也意味着其他任何建议都不会按原样运作。

而是使用附加到不变的祖先元素的单个委托事件处理程序。如果没有其他更接近/方便的话，document是默认值。在您的情况下，更好的元素可能是$('#tablemeh').on(...，但我需要查看您网页的HTML示例。

委托事件处理程序侦听事件（在本例中为click）以冒泡到元素，然后它应用jQuery选择器。然后它仅在导致事件的匹配元素上调用您的函数。这意味着元素只需要在事件时间存在/匹配。

另外，使用data作为快捷方式来获取带有data-前缀的属性。

因此，不要使用现有代码，只需使用以下内容：

 $(document).on('click', '.delMeh', function(){
      var did = $(this).data('value');
      $.ajax({
        url: "delTmeh.php",
        type: "POST",
        async: true, 
        data: { vrednostid: did },
        dataType: "html",
        success: function(data) {
        $('#tablemeh').dataTable().fnDestroy();
    drawMeh();   
        },
         error: function(data) {
         console.log(data);
         }
    });
 });

在html中调用函数时获取attr

4 个答案: