引导数据 ID 不传递值答案

【问题标题】：Bootstrap data-id not passing value引导数据 ID 不传递值
【发布时间】：2017-11-28 14:01:31
【问题描述】：

在我的代码中

<script>
    $(document).on('click', 'a#coin', function(){
    // get month
    var val = $(this).attr('data-id');

    $.post('alert.php', {coin: val}, function(data){
        console.log(data);
    });
});
</script>

这是模式的数据切换链接

<a id="coin" href="#" data-id="BTC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for BTC" style="color:orangered"></i></a>

而在 alert.php 我只是有

$coin = $_POST['coin'];
echo $coin;

模式弹出很好，只是没有传递 data-id 值不确定我做错了什么

添加了更多代码

<?php
require('alert.php');
?>
   <html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script>
    $(document).ready(function(){
        $("#liveprices").load("liveprices.php");
        setInterval(function() {
            $("#liveprices").load("liveprices.php");
        }, 5000);
    });
   </script>

  </head><body>

这里讨论的函数是在文档末尾加载的

【问题讨论】：

我不确定它是否会有所作为，但 jQuery 有一个用于访问 data-* 属性的内置函数。 $(this).data('id')
它对我有用。我在 alert.php 中获得硬币价值。打开您的控制台并查找错误
没有没有变化:(
说 bootstrap.min.js 需要 Jquery，尽管 jquery 是在它上面加载的
我认为这里的代码没有任何问题。你可以为你的 bootstrap.min.js 试试这个吗？ cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/…

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

说 bootstrap.min.js 需要 Jquery，尽管 jquery 已正确加载在它上面

默认情况下，引导程序使用 jQuery slim 版本。 Slim 版没有$.ajax 及相关功能。使用 jQuery 完整版。

使用这个 jQuery

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

以下是删除功能的超薄版本的评论

/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */

【讨论】：

已更改，尽管根据下面的答案我在控制台中遇到错误 ev 未在 HTMLAnchorElement 中定义。 (index.php:263)
这可能是一个不同的问题，你在第 263 行有什么？你能发布完整的代码。 @ChrisYates

【解决方案2】：

在discussion over the chat 提出要求后，我们得出结论，在这种情况下根本不需要 PHP，而简单的 jQuery 就可以了：

要求：

如果你看这个screenshot 您将看到带有警报图标的硬币名称列表.. 单击相关警报图标时，我希望它弹出一个模式并分配并回显一个变量值（这将是硬币）BTC 等

稍后将添加一个表单，理想情况下，该表单会将数据添加到准备提交的隐藏字段

解决方案（一种方法）：

JS FIDDLE

相关代码改动：

$(document).on('click', 'a.coin', function(){
    var val = $(this).attr('data-id'), modal = $('div#test-modal');
    console.log(val);
    modal.find('.modal-title').html('Get alerts for ' + val);

    modal.find('.modal-body .alert-notification').html('Get alert notifications when ' + val + ' breaks strong support / resistance lines');

    modal.modal('show');
});

【讨论】：

一个非常复杂的混乱的完美答案哈哈！谢谢

【解决方案3】：

由于您使用的是document.on('click')，$(this) 可能会有些混淆。我可能会尝试用$(event.target).closest('a#coin') 代替$(this)，看看是否有帮助：

$(document).on('click', 'a#coin', function(event) {
    var val = $(event.target).closest('a#coin');
    console.log(val);
});

【讨论】：

getting Uncaught ReferenceError: ev is not defined at HTMLAnchorElement. (index.php:263) at HTMLDocument.dispatch (jquery.js:4676) at HTMLDocument.elemData.handle (jquery.js :4360)
我在 ev 和 event 作为变量名之间切换。现在修好了。但请检查其他发布的答案，看起来它可能与您的直接控制台错误有关。
我更改了 jQuery 版本，但什么也没有我现在收到这些错误 Uncaught TypeError: Illegal invocation at Build.params(cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js:8411:4) at Function.jQuery.param (cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js:8450:4) at Function.ajax (@ 987654323@) 在 Function.jQuery.(匿名函数) [as post] (ht
这听起来确实与 jquery 版本或脚本运行的顺序有关。您可能需要发布更多代码来显示这些细节。