CODEWITHSUNDEEP
javascriptjqueryclick
Learner
Learner

Reputation: 2339

How to make both href and jquery click event work

I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.

Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.

jQuery(document).on('click','#answerCard a', function(event) {
    event.preventDefault();
    answerCardInnerLinkReportingCall(this);
});

If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.

I wanted to check if there is a better way of implementing this?

Edit1: Adding sample HTML

<div class="answer" style="display: block;">
    <div class="well">
    <div id="answerCard" answercardid="check_phone_acard">
    <h3 id="answerTitle">check your phone</h3>
        <div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
        <label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
        <!-- Utility Section -->
            <div class="util">
                <span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
                <span class="pull-right">               
            </div>
        </div>  
    </div>
</div>

Upvotes: 0

Views: 829

Answers (3)

Ja9ad335h
Ja9ad335h

Reputation: 5075

I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.

try like this

jQuery(document).on('click','#answerCard a', function(event) {
    //event.preventDefault();
    alert('script running');
    answerCardInnerLinkReportingCall(this);   
});

also created JS Fiddle. check it out.

Upvotes: 2

Ted
Ted

Reputation: 14927

Try something like this:

$('#answerCard a').click(function(event) {
    var loc = $(this).attr('href');
    event.preventDefault();
    answerCardInnerLinkReportingCall(loc, this);
});

function answerCardInnerLinkReportingCall(loc, that){
    // your code to do stuff here
    window.open(loc, '_blank');
}

See this demo fiddle

Upvotes: 0

user1433049
user1433049

Reputation:

You can use javascript's:

window.location.href = 'http://url.here.com';

To tell the browser to navigate to a page. Hope it helps.

Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();

Upvotes: 0

Related Questions