jQuery绑定单击不添加元素

Question

I have a button that when I click it more than once it is adding elements from the previous click. It works fine the first time through. We are using 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);
  })
})

What I am seeing is that the URL past to the server is adding the fields from the prior click. This of course causes issues when it gets to the server. Does this need to be cleared out after each click?

This is the code that calls it from our Grails app(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>

Thanks,

Tom

Answer 1

The problem with your code is, every time you click on that button, bind callback is invoked. So the first time you clicked, it got the href attribute added some parameters and replaced it. Again when you clicked on that for the second time, it does the same thing. It gets the href attribute which now contains parameters from previous update and then replace the existing. If you keep the href as it is, and only update the query parameters, you can define that as a global variable and use that in your event handler

You can hard code that link as a variable within in your script like this

$(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 );
  });
}); 

Hope this helps :)

Answer 2

Split the current href at the "?" to remove the query string parameters. Also, let jQuery build your new query string parameter string.

$(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);
    });
});