Jquery 在点击链接上将数据属性传递给模式

问题描述 投票：0回答：5

我正在尝试将一些自定义数据属性传递到通过链接打开的模式。

HTML 片段如下：

<div class="btn-group">
 <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
  <ul class="dropdown-menu" role="menu">
     <li>
         <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
         <i class="fa fa-check-square-o"></i> Contact</a>
     </li>
</ul>
</div>

模态片段如下：

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
            type="button"></button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
 </div>
</div>

我似乎无法使用属性“data-userName”的值设置“modal-title”。

我认为jquery会这样做（仅插入警报以查看值是否传递）：

$('#modal_contact').on('click', function() {
  var $el = $(this);
  var $username = $el.data('userName');
    alert(username);
  });

但似乎不起作用。正确的方法是什么？

jquery bootstrap-modal
5个回答
2
投票

尝试使用引导模式的事件回调而不是点击处理程序：

$('#option_contact').on('shown.bs.modal', function() {
  var $el = $("#modal_contact");
  var $username = $el.data('userName');
  alert(username);
});
2
投票

为了设置数据，不要使用驼峰命名法。安装使用这样的东西

data-user_name="User1"

$('#modal_contact').on('click', function() {
  var $el = $(this);
  var $username = $(this).data('user_name');
    alert($username);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
 <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
  <ul class="dropdown-menu" role="menu">
     <li>
         <a id="modal_contact" data-user_name="User1" data-toggle="modal" href="#option_contact">
         <i class="fa fa-check-square-o"></i> Contact</a>
     </li>
</ul>
</div>


<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
            type="button"></button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
 </div>
</div>

注意

data-* 属性由两部分组成：

  1. 属性名称不能包含任何大写字母，并且在前缀“data-”之后必须至少有一个字符
  2. 属性值可以是任意字符串
1
投票

请检查以下片段。您将正确找到用户名。在您的代码中，您提到了“userName”来获取应为“username”的属性值。

$(document).ready(function(){
  $('#modal_contact').on('click', function() {
    var $el = $(this);
    var $username = $el.data('username');
    alert($username);
    $(".modal-title").html($username);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
 <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
        <i class="fa fa-check-square-o"></i> Contact</a>
    </li>
  </ul>
</div>

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
            type="button"></button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
 </div>
</div>

1
投票

这里是预览代码解决方案 

    <!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script>
    $(document).ready(function() {
      $('#modal_contact').on('click', function() {

        var userName = $(this).attr("data-userName");
        $('.modal-title').append(userName);

      });
    });
  </script>
</head>

<body>


  <div class="btn-group">
    <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
          <i class="fa fa-check-square-o"></i> Contact</a>
      </li>
    </ul>
  </div>
  <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</body>

</html>
0
投票

$('#modal_contact').on('click', function() {
  var $el = $(this);
  var $username = $(this).data('user_name');
    alert($username);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
 <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
  <ul class="dropdown-menu" role="menu">
     <li>
         <a id="modal_contact" data-user_name="User1" data-toggle="modal" href="#option_contact">
         <i class="fa fa-check-square-o"></i> Contact</a>
     </li>
</ul>
</div>


<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal"
            type="button"></button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
 </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.