Jquery Breaks an OnClick Function

Question

I have been satisfactorily using a submit button like this

<a href="javascript:void()" onclick="document.booking.submit()" class="buttonavail"></a>

for some time. The class defines the position of the button and it's appearance.

Now I have added a Jquery script to the page, and the button no longer works. The script is

$(document).ready(function() {
    $("#tabcontent > div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#tabcontent div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#tabcontent > div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
$('#prices').load('../prices.php?hid=<?php echo $hid;?>');
});

Presumably it is something to do with having "javascript:void()" in the href, but I can't see why. Is there an alternative way of writing the href to get both things working together?

PARTIAL SOLUTION The problem was not really what I thought it was. In the end I found that the parent page and the page being loaded by Jquery both contained a with the same name. Re-naming one of the forms solved that part of the problem.

However now that that is out of the way I am finding another issue that appears to be a conflict between two bits of Jquery. I've asked another question about that at Jquery - Scripts are conflicting

Have you tried getting rid of the void statement to see what happens? — Andy, Feb 05 '14 at 14:17
There's no text in the anchor tag because the class incorporates a button, via a sprite. The javascript code is in the of the page. The "a href" is in the . Taking out just "void()" makes no difference. Taking everything out of the href just makes the page reload on click. — TrapezeArtist, Feb 05 '14 at 15:14

score 1 · Answer 1 · answered Feb 05 '14 at 14:19

Change the function as below. Add the submit in last line of the function like I shown

 $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#tabcontent > div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
        $(this).submit() **// ADD HERE**
    });

Yeah this might actually be better than my answer - I didn't realise OP wanted both to work together. +1 — aaron-bond, Feb 05 '14 at 14:21

score 0 · Answer 2 · answered Feb 05 '14 at 14:16

0

$('#tabs a').click is your problem. You are overwriting the click event for the <a> tag with this code.

You can update the jQuery code to this:

$('#tabs a:not(.buttonavail)').click

answered Feb 05 '14 at 14:16

aaron-bond

3,101
3
24
41

It's not the "$('#tabs a').click" that is causing it. My problematical "a href" is not inside the "tabs" div. However you have set me thinking down a different route and I have tried deleting bits of the script line-by-line. Done that way I have isolated the problem to the "$('#prices).load" line, though I have absolutely no idea why. Any further thoughts would be much appreciated. Meanwhile I shall continue fiddling away to try to get to the bottom of it. – TrapezeArtist Feb 05 '14 at 15:09
The anchored button isn't in the div you're reloading by any chance is it? If you're replacing the `` tag - even with an identical tag, it will lose reference and potentially break the click event – aaron-bond Feb 05 '14 at 15:15
No, they're in totally different parts of the page. HOWEVER, I have found that by putting a different file name in place of prices.php, everything works OK. So I am concluding that there is something in prices.php that is causing the problem. I'm now working through that, trying to find the conflict. – TrapezeArtist Feb 05 '14 at 15:34
If the "prices.php" file has a DOM element called `booking` you might have trouble with: `onclick="document.booking.submit()"` because there would now be two "booking" elements on the page – aaron-bond Feb 05 '14 at 15:39
Full marks to Askanison4! You hit the nail exactly on the head. I've just been flogging through prices.php deleting bits of code until I finally homed it in to a form with the name booking. I haven't revised the file and tested it yet, but it's looking pretty clear that that's where the problem was. – TrapezeArtist Feb 05 '14 at 16:12
Glad you found it! :) – aaron-bond Feb 05 '14 at 16:14

Jquery Breaks an OnClick Function

2 Answers2