jQuery的：網頁代碼​​和代碼的document.ready

Question

之間共享功能我有jQuery中定義爲這樣一些很好的對話：

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#someDialog").dialog({ 
     autoOpen: false, 
     model: true, 
     buttons: { 
      "Do Something": function() { 
       var cleanInput = sanitizeInput(input); 
       // Do something with the clean input 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
     } 
    }); 

    function sanitizeInput(input) { 
     // Some magic here 
     return input; 
    } 
}); 
</script> 

某處在頁面上，無關的對話，我有一個調用的元素

<a href="#" onclick="doSomething('wendy');">Wendy's stats</a> 

和相關的JavaScript：帶有參數的功能

<script type="text/javascript"> 

function doSomething(input) { 
    var cleanInput = sanitizeInput(input); 
    // Some code here 
} 

</script> 

我想重用該函數的sanitizeInput（）函數。但是，從document.ready函數之外，該對話框不起作用。將doSomething（）函數放入document.ready函數中同樣會將其分解。那麼我應該在哪裏放置sanitizeInput（）函數，以便兩者都可以使用它？

謝謝。

Answer 1

您只需將該功能移到ready()回調之外即可。

$(document).ready(function() { 

    $("#someDialog").dialog({ 
     autoOpen: false, 
     model: true, 
     buttons: { 
      "Do Something": function() { 
       var cleanInput = sanitizeInput(input); 
       // Do something with the clean input 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
     } 
    }); 
}); 

    /*** Make it global ***/ 
function sanitizeInput(input) { 
    // Some magic here 
    return input; 
} 

現在sanitizeInput()是全球可用，而不是侷限在ready()回調的變量範圍。

Answer 2

此外，我會建議一些小的更改。

<a href="#" onclick="doSomething('wendy');">Wendy's stats</a> 

有：

首先，我將取代這個

<a href="#" data-name="wendy or server var">Wendy's stats</a> 

，然後添加這個到$(document).ready塊的結尾：

$("a[data-name]").click(function (e) { 
    e.preventDefault(); 
    doSomething($(this).data("name")); 
});