在html中调用函数时获取attr答案

【问题标题】：Get attr when call function inside html在html中调用函数时获取attr
【发布时间】：2015-02-07 12:55:42
【问题描述】：

我有功能：

 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');，但不起作用。

当我需要调用函数时如何获取点击元素的属性数据值？

【问题讨论】：

onclick="delMeh(this);"。然后，当您将参数设置为函数delMeh 时，它将起作用。但是，强烈建议不要使用内联事件。
好的，但我需要内联使用它，因为我动态地创建了 html 并且 .on click 和类似的事件对我不起作用

标签： javascript jquery html onclick attr

【解决方案1】：

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

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

    &lt;i onclick="delMeh(32);" class="fa fa-times delMeh"&gt;&lt;/i&gt;

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

那么你可以使用$(this).data('value')

我希望这会有所帮助。

【讨论】：

【解决方案2】：

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 允许同一类型的多个事件并将 this 参数传递给函数。它还可以防止覆盖内联事件。

【讨论】：

我会尝试...所以这比内联函数调用更好？为什么？
@dertdetg 防止被其他（外部）源覆盖。例如。您加载了一个 jQuery 插件，该插件在所有斜体元素上设置了内联 onclick 处理程序，然后您自己的点击处理程序被覆盖。使用addEventListener 或jQuery 的事件处理程序可以防止这种情况发生。这些事件设置器还传递对拥有该事件的元素的函数的引用（ergo this 关键字）。
不行，这段代码只是不停地调用我的函数delMeh() ajax，并没有停止
那么它是如何调用的呢？
代码运行良好。你可以相信我。这是关于实施的。我可以以某种方式查看完整的代码吗？

【解决方案3】：

在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');

}

或者你可以使用 jQuery 的方式，通过在你的 html 元素上绑定 on click 处理程序，如下所示：

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

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

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

【讨论】：

【解决方案4】：

你真的应该避免像其他人提到的那样在 jQuery 中使用内联事件处理程序。原因包括获得新的 jQuery 冒泡功能以及没有将事件注册代码与事件处理代码分开。

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

改为使用单个委托事件处理程序，附加到不变的祖先元素。 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);
         }
    });
 });

【讨论】：