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原样，并且只更新查询参数，则可以将其定义为全局变量并在事件处理程序中使用

您可以将此链接硬编码为脚本中的变量，如此

$(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拆分为＆＃34;？＆＃34;删除查询字符串参数。另外，让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绑定点击不添加元素

2 个答案: