I want to prevent event Default for anchor links that are created after the page is loaded how is this possible?

higginsonline
higginsonline used Ask the Experts™
on
In the header I have a jquery script that does:
    <script type="text/javascript">
        $(function() {
            $("a").click(function(event) {
                event.preventDefault();
            });
        });
    </script>

It should prevent the default event from clicking an anchor link, meaning I don't want it to actually open or goto a new page.  The problem is that the links are created after the page is loaded so that the script is never applied to them.  Is there a way to fix it? or re-apply the code without refreshing the page?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
I think you want to wait until ondomcomplete to call the function the first time.

Author

Commented:
My thing is, DOM and the rest of the page is completed awhile ago.  Then they click on a button and it goes out and retrieves information and populates it into a div, without refreshing the entire page.  That div contains links that I want to target with jquery...

Commented:
There should be on oncontect complete.   Or the ajax that you call will return and allow you to process additional scripts when it completes.
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Commented:
You need the livequery plugin.
http://brandonaaron.net/docs/livequery/

<<script type="text/javascript" src="http://brandonaaron.net/docs/livequery/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://brandonaaron.net/docs/livequery/scripts/jquery.livequery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("a").livequery("click", function(event) {
                event.preventDefault();
            });
            $(document.body).append('<a href="lorem">ipsum</a>');
            $(document.body).append('<a href="lorem1">ipsum1</a>');
        });
    </script>

Open in new window

Commented:
Using Prototype I would use the following code.


When the call is complete in the setDefaultMethod I would then run your chunk of code.   It looks like jQuery lets you set a callback function similarly.

http://docs.jquery.com/Ajax/load#urldatacallback
var myAjax = new Ajax.Request(
  url, 
  {
    method: 'post', 
    parameters: params,
    onComplete: setDefaultMethod
  });

Open in new window

Commented:
URLs were wrong.  Make sure you replace the script src locations with your local copies.  Working demo.
<script type="text/javascript" src="http://brandonaaron.net/docs/livequery/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/livequery/jquery.livequery.js"></script>
    <script type="text/javascript">
        $(function() {
            $("a").livequery("click", function(event) {
                event.preventDefault();
            });
            $(document.body).append('<a href="lorem">ipsum</a>');
            $(document.body).append('<a href="lorem1">ipsum1</a>');
        });
    </script>

Open in new window

Author

Commented:
@sh0e:

The problem I am seeing is that it takes awhile for livequery to add the function to the tag.  If I click real quick on a link after the section loads, it will treat the url as a link and goto the page...

Commented:
You can hide the section before it loads (or show a loading screen), bind click, then show the section.
It will depend on how you load the new section.

By asynchronous design, what you want to do will not have a trivial "automagic" solution.

Author

Commented:
Actually, it doesn't matter how long I give it to load sometimes (did a loader).  It seems like it is just a hit or miss control.  Sometimes the livequery works and sometimes it doesnt.

Commented:
Would it be possible to see a demo? Or more of the context this is being used in?

Author

Commented:
Sure thing:

http://newcity.hol2.net/photos.aspx  click on the left picture to get a set, then click on the picture on the bottom right hand.  

Author

Commented:
That help at all?
Commented:
Sorry, I have been busy lately so I can't respond as quickly.  livequery won't work with objects that you don't create using jQuery (you are using Microsoft AJAX).  
@sh0e

Np, Ahh that makes sense.. Guess I could have told you I was using Microsoft AJAX for part of it..
When the event is called I had to run this in my VB.Net code:
ScriptManager.RegisterStartupScript(UpdatePanel1, GetType(String), "jquery", "$(function() { $('a').click(function(event) { event.preventDefault();var aSrc = $(this).attr('href');$('#displayPic').fadeOut('slow', function() { $('#displayPic').html('<img src=' + aSrc + ' />').fadeIn('slow'); });   });});", True)

Commented:
Perhaps I need brushing up on my .NET, but won't that only work once?
If you load UpdatePanel1 more than once it will only execute the first time?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial