Two ng-click events are triggered within a nested ng-click

I am facing an issue with using the ng-click within a nested list under another list that also has a ng-click event. Here is my code snippet:

<ul>
  <li
    ng-repeat="facet in node.Facets"
    ng-click="updateNav(facet.Action)"
    ng-cloak
   >
    {{facet.DisplayValue}}
    <ul>
      <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
        ng-click="updateSubNav(sub.Action)"
      >
        {{sub.DisplayValue}}
      </li>
     </ul>
  </li>
</ul>

The problem I am encountering is that when I click on updateSubNav, it automatically triggers updateNav as well. How can I prevent this from happening so that updateNav and updateSubNav function independently?

javascriptangularjsangularjs-ng-repeatangularjs-ng-click

Answer №1

Prevent the event from spreading further.

Guidelines:

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
    ng-click="updateSubNav($event, sub.Action)">
                           ^^^^^^        === Include event object

Procedure:

$scope.updateSubNav = function($event, action) {
    // Implementation details

    // Cease propagation
    $event.stopPropagation();
}

Answer №2

Understanding event bubbling is crucial. It involves halting the propagation of inner div click events to prevent them from propagating upwards.

ng-click="updateSubNav(sub.Action); $event.stopPropagation()"

An alternate approach is to pass the $event object to the updateSubNav method and stop the event propagation from there, as demonstrated by @Tushar in his response.

Answer №3

This issue is caused by the phenomenon of event bubbling.

 <ul>
          <li
            ng-repeat="facet in node.Facets"
            ng-click="updateNav(facet.Action)"
            ng-cloak
           >
            {{facet.DisplayValue}}
            <ul>
              <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
                ng-click="updateSubNav(sub.Action, $event)"
              >
                {{sub.DisplayValue}}
              </li>
             </ul>
          </li>
        </ul>


        $scope.updateSubNav = function(action,$event){
         $event.stopPropagation();
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to showcase a PDF document within a web browser

I am a newcomer to JavaScript and I'm encountering an issue with displaying a PDF file in the browser. Every time I try to do so, I keep receiving the same error message 'Cannot GET...' Despite trying various methods... router.get("/en ...

javascriptnode.jsexpress

The 'IN' Operator in JavaScript

Recently, I embarked on a journey to learn the art of JavaScript, and my current project involves creating a Tic Tac Toe game. However, I've hit a roadblock with the IN statement, as it consistently returns True under the specified condition. functio ...

javascriptarrays

I'm interested in knowing if it's feasible to develop unique jQuery selectors that can navigate ancestors, such as a :closest or :parents selector

As a developer who frequently creates jQuery plugins, I often find myself using custom jQuery selectors like :focusable and :closeto to simplify common filters in my code. For example, the :focusable selector is defined as follows: jQuery.extend(jQuery.e ...

javascriptjqueryjquery-selectorssizzle

Implementing dynamic props in Vue2 component by passing arbitrary named variables

Having recently delved into Vue, I am facing a challenge that has left me scratching my head after consulting the documentation: I am struggling to pass an arbitrarily named variable as a prop to a component instance. As per my understanding, props serve ...

javascriptvue.jsvuejs2

What could be causing the computed property in Vue 2 component to not return the expected state?

I'm encountering an issue with my Vue component where it fails to load due to one of its computed properties being undefined: Error: Cannot read properties of undefined (reading 'map') Here is the snippet of the computed property causing ...

javascriptvue.jsvuejs2statevuex

What is the best way to handle waiting for a JavaScript __doPostBack call in Selenium and WebDriver?

I am encountering a unique issue while automating with Selenium/Python and trying to input data into two fields on a website. The script fills out the first field, ORIGIN CITY, without any problems. I have used WebDriverWait for the second field, DELIVERY ...

javascriptpythonseleniumasp.net-ajaxdopostback

What is the most effective approach to integrating socket.io as a submodule into the ExpressJS framework?

In my current project, I am working on developing an application using ExpressJs and following the submodule architecture recommended by tjholowaychuk. Furthermore, I also want to incorporate real-time socket interactions into the app by integrating socke ...

javascriptnode.jswebsocketsocket.ioexpress

Using jQuery to specifically target elements of a specific class that are nested within another element

I am currently using a jQuery function that toggles a drop-down navigation menu by changing its class when clicked: $(function () { $('.nav-titles').on('click', function() { $('.nav-dropdown').toggleClass(& ...

javascriptjquerydom

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...

javascripthtmlangulartypescript

Error: A DOMException was caught in the promise while trying to push the router

Currently, I am facing an issue while working with React. An Uncaught DOMException occurs when trying to push the router. This exception specifically happens when I attempt to push a new URL into the router using an event triggered from a button in a mod ...

javascriptreactjs

Stream JSON data to a file with Node.js streams

After reading this article, I decided to utilize the fs.createWriteStream method in my script to write JSON data to a file. My approach involves processing the data in chunks of around 50 items. To achieve this, I start by initializing the stream at the be ...

javascriptnode.jsjsonstreamnode-streams

Can you show me the steps for downloading the WebPage component?

My goal is to save webpages offline for future use, but when I download them as html many of the included components disappear! I attempted opening them in a WebBrowser and downloading as html with no success. One potential solution is to download the ht ...

javascripthtmlvb.netdomwebclient

Sort the parent by the number present in the child item using jQuery

Is there a way to rearrange a list of items based on a specific number within each item? Consider the following HTML structure that cannot be modified: <ul id="ul-list"> <li> <div class="name">product 1</div> & ...

javascriptjqueryhtml

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

Currently enrolled in a ReactNative course on Coursera, I am facing an error in a 4-year-old course: "Touchable child must either be native or forward setNativeProps to a native component." I am unsure about this error and would greatly appreciate any hel ...

javascriptreactjsreact-native

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Transforming unprocessed string information with a set position-dependent format into a structured format such as JSON

Here is the scenario I am dealing with: The input format consists of a string with a fixed total length, where each set of fixed positions represents a different value. For example, if the input is "ABCDE12345", position 1 to 3 ("ABC" ...

javascriptpythonjsonperformancetype-conversion

What is the importance of having Express in the frontend?

As someone who is relatively new to the world of JavaScript and web applications, I recently came across an Express web application project that contained a public directory, client directory, and server directory. This has raised some questions for me. I ...

javascriptnode.jsreactjsexpress

Implementing custom styles in JavaScript according to the specific browser or platform

When it comes to adding multiple css styles to a dom element and ensuring compatibility across different browsers, which approach is more optimal for performance? Combining all prefixed css properties together, allowing the browser to decide which one ...

javascripthtmlcsscross-browser

Callbacks in Laika tests go untriggered

Meteor.collection.insert() allows for the use of a callback as one of its arguments. To demonstrate, you can start a new Meteor project and execute the following code in the browser's console. my_collection = new Meteor.Collection("myCollection"); my ...

javascriptmeteorlaika

Matching nodes to selectors is a breeze with Angular JS and jqLite

Currently, I am in the process of integrating a few jQuery functions into jqLite to avoid loading the entire jQuery library when working with my angular applications. Following the approach outlined by Ben Nadel in his insightful article. However, I have ...

javascriptjqueryangularjsjqlite