Een door de gebruiker gedefinieerde functie in jQuery

Ik probeer een door de gebruiker gedefinieerde functie in jQuery te bellen:

$(document).ready(function() {
  $('#btnSun').click(function() {
    myFunction();
  });
  $.fn.myFunction = function() {
    alert('hi');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

Antwoord 1, Autoriteit 100%

Als u een normale functie wilt bellen via een jQuery-evenement, kunt u het zo doen:

$(document).ready(function() {
  $('#btnSun').click(myFunction);
});
function myFunction() {
  alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

Antwoord 2, Autoriteit 41%

Probeer dit gewoon. Het werkt altijd.

$(document).ready(function() {
  $('#btnSun').click(function() {
    $.fn.myFunction();
  });
  $.fn.myFunction = function() {
    alert('hi');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

Antwoord 3, autoriteit 15%

Ze worden plug-insgenoemd, zoals Jaboc opmerkte. Om logisch te zijn, zou de plug-in-functie iets moeten doen met het element waardoor het wordt aangeroepen. Overweeg het volgende:

jQuery.fn.make_me_red = function() {
    return this.each(function() {
        this.style.color = 'red';
    });
};
$('a').make_me_red();

Antwoord 4, autoriteit 11%

Het volgende is de juiste methode

$(document).ready(function() {
    $('#btnSun').click(function(){
        $(this).myFunction();
     });
     $.fn.myFunction = function() { 
        alert('hi'); 
     }
});

Antwoord 5, autoriteit 9%

Probeer dit $('div').myFunction();

Dit zou moeten werken

$(document).ready(function() {
 $('#btnSun').click(function(){
  myFunction();
 });
function myFunction()
{
alert('hi');
}

Antwoord 6, autoriteit 5%

jQuery.fn.make_me_red = function() {
    return this.each(function() {
        this.style.color = 'red';
    });
};
$('a').make_me_red() // - instead of this you can use $(this).make_me_red() instead for better readability.

Antwoord 7

$(document).ready(function() {
  $('#btnSun').click(function(){
      myFunction();
   });
   $.fn.myFunction = function() { 
     alert('hi'); 
    }; 
});

Zet ‘; ‘ na functiedefinitie…


Antwoord 8

jQuery.fn.make_me_red = function() {
    alert($(this).attr('id'));
    $(this).siblings("#hello").toggle();
}
$("#user_button").click(function(){
    //$(this).siblings(".hello").make_me_red(); 
    $(this).make_me_red(); 
    $(this).addClass("active");
});
​

Functiedeclaratie en terugbellen in jQuery.


Antwoord 9

function hello(){
    console.log("hello")
}
$('#event-on-keyup').keyup(function(){
    hello()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="event-on-keyup">

Antwoord 10

jQuery.fn.clear = function()
{
    var $form = $(this);
    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');
    return this;
}; 
$('#my-form').clear();

Antwoord 11

in mijn geval deed ik dat

function myFunc() {
  console.log('myFunc', $(this));
}
$("selector").on("click", "selector", function(e) {
  e.preventDefault();
  myFunc.call(this);
});

op de juiste manier myFunc aanroepen met de juiste this.

Other episodes