Pass params zu funktionieren mit on()

Question

$(document).on('click', '#my', myFunc('param')); 

function myFunc(param){ 
    //do something 
} 

ist das falsch snytax? Ich habe einen Fehler von jquery-1.10.2.min.js:3 Uncaught TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply is not a function

Answer 1

Sie können für on() wie unter Datenobjekt als dritter Parameter an:

$(document).on('click', '#my', {p: 'World'}, myFunc); 

und in der Funktion können Sie das Datenobjekt mit event.data zugreifen, wenn das Ereignis triggred wie unten:

function myFunc(event) { 
    console.log('Hello, ' + event.data.p); 
} 

Diese Seite finden Sie unter Abschnitt Passing data to the handler: http://api.jquery.com/on/#passing-data

Answer 2

Sie binden nicht die myFunc mit einem bestimmten Parameter, sondern rufen die Funktion myFunc ('param') und binden das Ergebnis dieser Methode aufrufen.

Eine Möglichkeit, zu tun, was Sie wollen Ihren Anruf in einer anderen Funktion wickelt:

$(document).on('click', '#my', function() { myFunc('param') }); 

Answer 3

Dies ist in der Tat falsch. 'on' Callback erwartet [http://api.jquery.com/on/] ein Event als ersten Parameter. In der aktuellen Form hat Ihr Code keine Chance zu arbeiten, da myFunc ('param') keine Funktion ist (es ist das Ergebnis seiner Bewertung).

Sie können einfach Ihre innere Funktion auf diese Weise wickeln:

$(document).on('click', '#my', function() { myFunc('param'); }); 

function myFunc(param){ 
    //do something 
} 

aber wenn Sie richtig wollen jquery in diesem Handler verwenden, benötigen Sie diese binden:

$(document).on('click', '#my', function() { myFunc.bind(this)('param'); }); 

    function myFunc(param){ 
     //do something 
    } 

Sie auch machen könnte Ihre Funktion gibt eine andere Funktion zurück:

$(document).on('click', '#my', myFunc('param')); 

    function myFunc(param){ 
     return function() { 
     }; 
    } 

Hier ist eine komplette Geige

function myFunc1(p) { 
 
    return function() { 
 
    $(this)[0].innerHTML = "modified by " + p; 
 
    }; 
 
} 
 

 
function myFunc2(p) { 
 
    $(this)[0].innerHTML = "modified by " + p; 
 
} 
 

 
$(document).on("click", "#one", myFunc1("inner wrapping")); 
 
$(document).on("click", "#two", function() { myFunc2.bind(this)("outer wrapping");});

div { 
 
    width: 300px; 
 
    background-color: yellow; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one">one</div> 
 
<div id="two">two</div>