【问题标题】:Sending dynamic variable to jquery将动态变量发送到jquery
【发布时间】:2017-09-26 22:21:47
【问题描述】:

我有一个使用 EJS 模板动态构建的表。当用户单击按钮时,我想将动态值传递给 jQuery 函数。

这就是我构建表格的方式:

<% for(var i=0; i< automated_campaigns.length; i++) { %>

...

<%= automated_campaigns[i].name %>

<td>
<button type="button" class="btn btn-danger btn" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>">Activate</button>

</td>

...
<% } %>

这是我处理点击事件的 jQuery 函数:

<script type="text/javascript">

$('.btn').on('click', function(automated_campagin_name) {
    var $this = $(this);
  $this.button('loading');

    $.get( "/automated-campaigns/change_status/" + str(automated_campaign_name), function( data ) {
      $( ".result" ).html( data );
      alert( "Load was performed." );
    });


    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

</script>

如何发送正确的活动名称?

【问题讨论】:

    标签: javascript jquery node.js ejs


    【解决方案1】:

    您可以在所需的每个按钮上设置数据属性:

    <button type="button" data-cname="<%= automated_campaigns[i].name %>" class="btn btn-danger btn" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>">Activate</button>
    

    脚本可以是这样的:

     <script type="text/javascript">
    
    $('.btn').on('click', function(automated_campagin_name) {
        var $this = $(this);
        var cname = $this.data("cname");
      $this.button('loading');
    
        $.get( "/automated-campaigns/change_status/" + str(cname), function( data ) {
          $( ".result" ).html( data );
          alert( "Load was performed." );
        });
    
    
        setTimeout(function() {
           $this.button('reset');
       }, 8000);
    });
    
    </script>
    

    【讨论】:

      【解决方案2】:

      campaign_name 放在data-campaign_name 中,因为您已经在循环它们中的每一个,然后在 jQuery 中访问它。

      $('.someElement').data('campaign_name');
      

      【讨论】:

        猜你喜欢
        • 2016-08-20
        • 2011-09-21
        • 2018-08-22
        • 2016-05-17
        • 2012-05-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多