nested ajax call click event or event.default function not working-CodePudding

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

CodePudding user response：

ok 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 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" );
});

CodePudding user response：

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.