Any reason why jquery .click() wouldent target an a tag?

Question

I am stumped as to why my query .click() is not working. I am trying to change the href tag on an a element, before it goes to the next page.

here is my jquery

    $('.individualFormSections').click(function() {      
    var formSectionTitle = $(this).siblings('div').text(); // gets section title that was clicked
    console.log(formSectionTitle);

    assetConfigIdForURL = assetConfigIdForURL.replace(/\s+/g,'-');
    woTypeCodeForURL =  woTypeCodeForURL.replace(/\s+/g,'-');
    woMaintTypeCode = woMaintTypeCode.replace(/\s+/g,'-');
    formSectionTitle = formSectionTitle.replace(/\s+/g,'-');

    // Change href dynamically to set url parameters
    $(this).attr("href",'airSystem.html?insp_asset_config_id='+assetConfigIdForURL+'&wo_type_code='+woTypeCodeForURL+'&wo_maint_type_code='+woMaintTypeCode+'&formSection='+formSectionTitle+'&wo_id='+woIdForURL+'');

 });

Here is the html

            <a class="individualFormSections" href="">
              <img class="bus-form-img" src="pull-up.jpg" alt="Trolltunga Norway">
            </a>
            <div class="desc" id="bodyDamageDesc">AirSystem</div>

I also tried doing a simple alert and its not even targeting the a tag. My javascript link is set up correctly.

A little background, the html is getting generated dynamically from a previous javascript function. When I use chrome developer tools, all the html shows just fine. Any ideas on what could be causing this?

it's working but the a tag is handling the click first. you need to use preventDefault() inside your click function — Cruiser, Apr 27 '17 at 13:02
[*generated dynamically*](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/27373951) — Mohamed-Yousef, Apr 27 '17 at 13:05
That is a piece I needed but did not solve my problem. There may be another factor as to why its not working. Will get back on this — plgelso, Apr 27 '17 at 13:27

score 0 · Answer 1 · answered Apr 27 '17 at 13:04

Always use prevent default in such cases

$('.individualFormSections').click(function(e) {
    e.preventDefault();
    var formSectionTitle = $(this).siblings('div').text(); // gets section title that was clicked
    console.log(formSectionTitle);

    assetConfigIdForURL = assetConfigIdForURL.replace(/\s+/g,'-');
    woTypeCodeForURL =  woTypeCodeForURL.replace(/\s+/g,'-');
    woMaintTypeCode = woMaintTypeCode.replace(/\s+/g,'-');
    formSectionTitle = formSectionTitle.replace(/\s+/g,'-');

    // Change href dynamically to set url parameters
    $(this).attr("href",'airSystem.html?insp_asset_config_id='+assetConfigIdForURL+'&wo_type_code='+woTypeCodeForURL+'&wo_maint_type_code='+woMaintTypeCode+'&formSection='+formSectionTitle+'&wo_id='+woIdForURL+'');

 });

score -1 · Accepted Answer · answered Apr 27 '17 at 13:04

Change to this.

       $('.individualFormSections').click(function(e) {
            e.preventDefault();      
            var formSectionTitle = $(this).siblings('div').text(); // gets section title that was clicked
            console.log(formSectionTitle);

            assetConfigIdForURL = assetConfigIdForURL.replace(/\s+/g,'-');
            woTypeCodeForURL =  woTypeCodeForURL.replace(/\s+/g,'-');
            woMaintTypeCode = woMaintTypeCode.replace(/\s+/g,'-');
            formSectionTitle = formSectionTitle.replace(/\s+/g,'-');

            // Change href dynamically to set url parameters
            $(this).attr("href",'airSystem.html?insp_asset_config_id='+assetConfigIdForURL+'&wo_type_code='+woTypeCodeForURL+'&wo_maint_type_code='+woMaintTypeCode+'&formSection='+formSectionTitle+'&wo_id='+woIdForURL+'');

         });

Change to what? While this code may answer the question, it would be better to explain how it solves the problem without introducing others and why to use it. Code-only answers are not useful in the long run. — freedomn-m, Apr 27 '17 at 13:37
To help others straight from jquery page. Description: If this method (event.preventDefault())is called, the default action of the event will not be triggered. This method does not accept any arguments. For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event. https://api.jquery.com/event.preventdefault/ — plgelso, Apr 27 '17 at 13:44

Any reason why jquery .click() wouldent target an a tag?

2 Answers2