Question 36661 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

nested ajax call click event or event.default function not working – Jquery

first i created navigation click event

$('#inner-navigation li a')
    .on('click', function (e) {
    e.preventDefault();
    AjaxNavUrl.checkURL(this.hash);
});

then it conducts ajax call and response html data
based on navigation key

$(".panel-body").html(data);

first ajax click working nicely..

then whithin that responese html data there is rest of click event and ajax call like

$(document.body).on('click', '.page-demos .page-wrapper', function (e) {
e.preventDefault();

and this

$(document.body).on('click', '.button-next', function (e) {
e.preventDefault();

but it seems like click event or e.preventDeafult() function is not working

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the answer from jQuery doc here is what I learned,

    Event Propagation

    Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree, triggering each of its parent click event handlers:

    <a>
<li>
<ul #list>
<div #container>
<body>
<html>

    document root
    This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called event bubbling or event propagation.

    Since we know how events bubble, we can create a delegated event:

    $("#list").on("click", "a", function(event) {
  event.preventDefault();
  console.log($(this).text());
});

    Notice how we have moved the a part from the selector to the second parameter position of the .on() method. This second, selector parameter tells the handler to listen for the specified event, and when it hears it, check to see if the triggering element for that event matches the second parameter. In this case, the triggering event is our anchor tag, which matches that parameter. Since it matches, our anonymous function will execute. We have now attached a single click event listener to our <ul> that will listen for clicks on its descendant anchors, instead of attaching an unknown number of directly bound events to the existing anchor tags only.

    linkUsing the Triggering Element
    What if we wanted to open the link in a new window if that link is an external one (as denoted here by beginning with "http")?

    // Attach a delegated event handler
$("#list").on("click", "a", function(event) {
  var elem = $(this);
  if (elem.is("[href^='http']")) {
    elem.attr("target", "_blank");
  }
});

    This simply passes the .is() method a selector to see if the href attribute of the element starts with "http". We have also removed the event.preventDefault(); statement as we want the default action to happen (which is to follow the href).

    We can actually simplify our code by allowing the selector parameter of .on() do our logic for us:

    // Attach a delegated event handler with a more refined selector
$("#list").on( "click", "a[href^='http']", function(event) {
  $(this).attr("target", "_blank");
});

  2. 0

    The click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. This is most commonly used with elements like button, input, and a, but actually works with any visible DOM element.

    Example

    <div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>



<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0),
        incrementClickCounter : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

    Each time you click the button, this will invoke incrementClickCounter() on the view model, which in turn changes the view model state, which causes the UI to update.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search