Question

The question is: how can I make it so that every time openZonePupup() is called, whatever is assigned to the .click function changes on every call because right now it only changes on the first call ofopenZonePupup()

Let me first try and explain what the program does through prose and examples. This is for an online course which is split up into units. once a unit is clicked on a box pops up asking the user if they want to do a lesson or an exercise and then the lesson and exercise button has a function attached, with specific variables related to that lesson or exercise, to it with the .click function.

The problem is that once one unit has been clicked upon and the specific variables in the function applied using the .click function, once this popup has been closed and the user clicks on another unit, it uses the same specific variables from the first time. Maybe looking at my code would help you better:

Popup HTML:

<div class="jqmWindow" id="dialog">
    <a id="popupHide" href="javascript:;" onclick="$('#dialog').jqmHide();" style=""></a>

    <div id="zoneName"></div>
        <div id="buttons">
            <a id="lessonButton" class="lessonButton">Lesson</a>
        <a id="exerciseButton" class="exerciseButton">Exercise</a>
    </div>
    </div>
</div>

The function called when the link to the unit is clicked on. It applies the name to the popup html and sets the link to the lesson and exercise according to the variables specified, then after it shows the popup:

function openZonePupup(name,juegoID,tipoID,lang,nivel) {
    $("#zoneName").html(name);

    $(".lessonButton").click(function () { 
    $('#dialog').jqmHide();
        abrirLeccion(juegoID,nivel);    
    });

    $(".exerciseButton").click(function () { 
        obreJoc(juegoID, tipoID, name);
        $('#dialog').jqmHide();
    });

    $('#dialog').jqmShow();
}

openZonePopup is called by the text for the unit, for example:

<a href="javascript:;" onclick="abrirZonePopUp('Past Simple - Past Continuous ',8,2,'EN',1);">02</a>
<a href="javascript:;" onclick="abrirZonePopUp('Conjunctions',22,8,'EN',1);">14</a>

I hope you understand, if not leave a comment and i’ll respond asap, thanks for any help that you can give!

Answer 1

As a first step I would try unbinding the click handlers before binding them to the specific values passed by the function.

function openZonePupup(name,juegoID,tipoID,lang,nivel) {
    $("#zoneName").html(name);

    $(".lessonButton").unbind("click").click(function () { 
        $('#dialog').jqmHide();
        abrirLeccion(juegoID,nivel);    
    });

    $(".exerciseButton").unbind("click").click(function () { 
        obreJoc(juegoID, tipoID, name);
        $('#dialog').jqmHide();
    });

    $('#dialog').jqmShow();
}