none
Java script on click event not triggering after adding a new button to div dynamically RRS feed

  • Question

  • Hi,

    (This might be easy but I never did it before).

    I just got a new HTML template that I need to change for our company website. The project must be in ASP.Net MVC.

    I loaded successfully the HTML in the page but now I have to start working on adding events and functionality to buttons and so on. 

    What I'm trying to achieve now is to add a new tab button into the "tab_buttons" div and keep the click event that is called from javascript they provided to us.

    This is the div where the new button will be added.

      <div id="casereference_tabs" class="tab-buttons">
            <button class="tab-links active" data-buttonid="1">Cases List</button>
            <button class="tab-links" data-buttonid="4">M/ELP-229-DE/I</button>
        </div>

    This is the Java function that I call to add the new button:

        <script type="text/javascript">
            function createInput() {
                //var mydiv = document.getElementById("casereference_tabs");
                //mydiv.insertAdjacentHTML('beforeend', '<button class="tab-links" data-buttonid="3"> Test </button>');
    
                var mydiv = document.getElementById("casereference_tabs");
                var newButton = "<button class=\"tab-links\" data-buttonid=\"4\"> Test </button>";
                mydiv.insertAdjacentHTML('beforeend', newButton);
            }
        </script>


    This is the line where I call the JS  function

     <td class="nobr" data-label="Ihr Zeichen Unser Zeichen"><a onclick="createInput();" href="#">ELP-028-X</a></td>

    I successfully added the button but the click event is not firing. If I add the button at design time the click event will fire correctly.

    Can someone explain me what I do wrong?

    Can someone point me in the right direction implementing HTML templates into razor views, maybe I used the wrong aproach?

    Monday, February 17, 2020 1:47 PM

Answers

  • According to documentation for jQuery, consider “delegated event”, which probably is this:

       e( "#casereference_tabs" ).on( "click", ".tab-links", function ( )

          {

             toggleMainTabs( this )

       } );

    (instead of e(".tab-links").on…).


    • Edited by Viorel_MVP Tuesday, February 18, 2020 7:02 AM
    • Marked as answer by Bogdan-Sorin Tuesday, February 18, 2020 7:14 AM
    Tuesday, February 18, 2020 7:02 AM

All replies

  • Did you find the place where the event handlers are added in JavaScript? Search for casereference_tabs or tab-buttons, maybe you will find something like $(“casereference_tabs button”).click(someHandler), which can be adjusted.

    Monday, February 17, 2020 6:24 PM
  • Yes I found it this is the code:

      function (e) {
            (function (e) {
                e(function () {
                    e(".tab-links").on("click", function () {
                        toggleMainTabs(this)
                    });
                    e(".tab-sub-links").on("click", function () {
                        toggleSubTabs(this)
                    });
                    e(".table-v1").basictable({
                        breakpoint: 1024
                    });
                    e(".table-v2").basictable({
                        breakpoint: 768
                    })
                })
            })(window.jQuery, window, document)
        }();

    Should be working fine right?

    I still don't understand why If I add the button at design time the click event will fire correctly and when I add it at run time nothing happens.

    Tuesday, February 18, 2020 6:30 AM
  • According to documentation for jQuery, consider “delegated event”, which probably is this:

       e( "#casereference_tabs" ).on( "click", ".tab-links", function ( )

          {

             toggleMainTabs( this )

       } );

    (instead of e(".tab-links").on…).


    • Edited by Viorel_MVP Tuesday, February 18, 2020 7:02 AM
    • Marked as answer by Bogdan-Sorin Tuesday, February 18, 2020 7:14 AM
    Tuesday, February 18, 2020 7:02 AM
  • That did the trick. Thank you for your time.
    Tuesday, February 18, 2020 7:14 AM