style - jquery prop

Llamar a una función definida por el usuario en jQuery

Question

Intento llamar a una función definida por el usuario en jQuery:

$(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>

Intenté lo siguiente también:

$(document).ready(function() {
  $(''#btnSun'').click(function() {
    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>

¡No parece funcionar! Alguna idea de donde estoy equivocado?

Answer 1

El siguiente es el método correcto

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

Answer 2

Pruebe con este $(''div'').myFunction();

Esto debería funcionar

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

function myFunction()
{
alert(''hi'');
}

Answer 3

Se llaman complementos , como comentó Jaboc. Para que tenga sentido, la función de complemento debería hacer algo con el elemento al que se llama. Considera lo siguiente:

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

$(''a'').make_me_red();

Answer 4

Si desea llamar a una función normal a través de un evento jQuery, puede hacerlo así:

$(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>

Answer 5

Solo prueba esto. Siempre funciona

$(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>

Answer 6

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">

Answer 7

$(document).ready(function() {
  $(''#btnSun'').click(function(){

      myFunction();

   });

   $.fn.myFunction = function() { 
     alert(''hi''); 

    }; 
});

Poner '' ; ''después de la definición de la función ...

Answer 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");
});
​

Declaración de función y devolución de llamada en jQuery .

Answer 9

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.