JavaScript się zapętla przy funkcji .load()

Question

function contextInj() {
    $('.menu-btn').click(function () {
        $('#content').load('pages/' + $(this).attr('id') + '.php');
//        return false;
    });
}
;

 

Skrypt ten powinien ładować pewna zawartość do divu o id content. 

Po klikniecu raz skrypt wykonuje się dwukrotnie, po kliknieciu nastepnym trzykrotnie, pozniej czterokrotnie i tak dalej.

Nie rozumiem dlaczego. Nie pojmuje skąd ta pętla.

Skrypt wywołuję przez fnkcje onclick() na elemencie <ul>.

Element ten jest stałą częścią strony ( jest to element menu). 

 

Czy ktos potrafi zaradzić wielokrotnemu wykonywaniu się skryptu?

Answer 1

Bo za każdym klikiem na ul dodajesz klik na button, więc przy każdym kliku odpala Ci się n + 1 handlerów.

Comments

Ok, a jak temu zaradzić?

Da się jakos zerować ten klik po jego wykonaniu?

---

Po prostu dodać klik od razu do elementu

---

   <div id="headerMenu" class="col-md-6 col-sm-6">
        <ul class="nav nav-pills nav-justified ">
            <li role="presentation" class="menu-btn" id="home" onclick="contextInj()"><a  >Home</a></li>
            <li role="presentation" class="menu-btn" id="list" onclick="contextInj()"><a >Users List</a></li>
            <li role="presentation" class="menu-btn" id="add" onclick="contextInj()"><a >Add Users</a></li>
        </ul>
    </div>

 

 

Nie bardzo rozumiem jak dodac klik do elementu, mysle ze konkretniej juz tego nie moge przypisac w HTML'u, chyba ze sie myle?

---

To powinno być zrobione tak: http://jsfiddle.net/Comandeer/tLcmjs0s/

A już idealnie: https://github.com/defunkt/jquery-pjax