jQuery绑定点击不添加元素

Question

我有一个按钮，当我多次单击它时，它会添加上一次单击的元素。第一次通过时效果很好。我们正在使用 jQuery 1.11.1.

$(function() {
  $('a[name="generateReport"]').bind('click', function() {
    $(this).attr('href', $(this).attr('href') + '?est=' + est.value + '&prodcd=' + prodcd.value + '&startDate=' + startDate.value + '&endDate=' + endDate.value + '&tracking=' + tracking.value);
  })
})

我看到的是 URL 过去的服务器正在添加来自先前点击的字段。当它到达服务器时，这当然会导致问题。每次点击后都需要清除吗？

这是从我们的 Grails 应用程序 (2.4.3) 调用它的代码

<g:link class="btn btn-primary" name="generateReport" controller="generateTTLReport" action="renderOutput">
                                <i class="icon-print icon-white"></i>
                                    Generate Report
                            </g:link>

谢谢，

汤姆

Answer 1

您的代码存在问题，每次单击该按钮时，都会调用 bind 回调。所以你第一次点击的时候，它得到了 href 属性添加了一些参数并替换了它。同样，当您第二次单击它时，它会做同样的事情。它获取 href 属性，该属性现在包含先前更新的参数，然后替换现有的。如果保持 href 不变，只更新查询参数，则可以将其定义为全局变量并在事件处理程序中使用它

您可以像这样

在脚本中将 link 作为变量硬编码

$(function() {

  // define your variable within document.ready but outside your event handler
  var reportURL = '/LSRTIS/generateTTLReport/renderOutput';

  $('a[name="generateReport"]').bind('click', function() {
    var urlWithParams = reportURL + '?est=' + est.value + '&prodcd=' + prodcd.value + '&startDate=' + startDate.value + '&endDate=' + endDate.value + '&tracking=' + tracking.value;
    $(this).attr('href', urlWithParams );
  });
});

希望这对您有所帮助:)

Answer 2

在“？”处拆分当前 href删除查询字符串参数。此外，让 jQuery 构建新的查询字符串参数字符串。

$(function() {
    $('a[name="generateReport"]').on('click', function() {
        var $this = $(this),
            path = $this.attr('href').split('?')[0],
            params = {
                est: est.value,
                prodcd: prodcd.value,
                startDate: startDate.value,
                endDate: endDate.value,
                tracking: tracking.value
            },
            href = [path, $.param(params)].join('?');

        $this.attr('href', href);
    });
});

jQuery绑定点击不添加元素

jQuery bind click not adding elements

javascript

jquery

grails