j查询绑定单击不添加元素

jQuery bind click not adding elements

本文关键字：添加 元素 单击 查询 绑定      更新时间：2023-09-26

我有一个按钮，当我多次单击它时，它会添加上次单击的元素。 第一次通过它工作正常。 我们正在使用 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>

谢谢

汤姆

在 "？" 处拆分当前 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);
    });
});

代码的问题在于，每次单击该按钮时，都会调用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 );
  });
});

希望这对:)有所帮助

相关文章：