как определить функцию, чтобы использовать ее позже в Jquery

Question

В простом Javascript довольно просто определить функцию, а затем вызвать ее позже, но я все еще новичок в Jquery, вы можете мне помочь?

ниже - Простой Javascript, но я хочу сделать это с Jquery

<script>
function displayMe(){document.getElementById('demo').innerHTML = "Display"};
</script>

<button type="button" onclick="displayMe()">
    Click me to add the word "Display" to the page.
</button>

<p id="demo"></p>

тогда вот рабочий Jquery, но не то, что я хочу сделать,

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
        crossorigin="anonymous"></script>
  
<script>
$(document).ready(function (){
    $('#displayMe').click(function(){
        $("#demo").html('Display');
    });
});
</script>

<button type="button" id="displayMe">
    Click me to add the word "Display" to the page.
</button>

<p id="demo"></p>

и теперь моя попытка определить и использовать позже

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
        crossorigin="anonymous"></script>
  
<script>
$(document).ready(function (){
    $('#displayMe').click(displayfunction(){ });
});

function displayFunction (){
    $("#demo").html('Display')
};
</script>

<button type="button" id="displayMe">
    Click me to add the word "Display" to the page.
</button>

<p id="demo"></p>

это показывает ошибку в:

{
  "message": "Uncaught SyntaxError: missing ) after argument list",
  "filename": "https://stacksnippets.net/js",
  "lineno": 20,
  "colno": 41
}

я пытался добавить), просто получите другие ошибки.

Answer 1

Вам нужно передать displayFunction в качестве параметра для $('#displayMe').click()

function displayFunction() {
    $("#demo").html('Display')
}

$(document).ready(function () {
    $('#displayMe').click(displayFunction);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="displayMe">
	Click me to add the word "Display" to the page.
</button>

<p id="demo"></p>

Answer 2

Вы можете просто указать имя функции для обработчика click, и имя будет displayFunction, а не displayfunction:

$(document).ready(function() {
  $('#displayMe').click(displayFunction);
});

function displayFunction() {
  $("#demo").html('Display')
};

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<button type="button" id="displayMe">
Click me to add the word "Display" to the page.</button>

<p id="demo"></p>

Или просто используйте атрибут onclick, как вы делали в первом примере:

function displayFunction() {
  $("#demo").html('Display')
};

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<button type="button" id="displayMe" onclick="displayFunction()">
Click me to add the word "Display" to the page.</button>

<p id="demo"></p>