如何将匿名jQuery代码转换为命名函数并调用它?

时间:2014-09-03 16:21:00

标签: javascript jquery

虽然我对thread提到了上述问题,但我仍无法解决问题。

我的jQuery代码在单独的JS文件[test.js]中: -

jQuery(document).ready(function($){

$( "#category" ).change('select',function() 
{
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
});

});

现在我已经在我的PHP页面标题中添加了这个js文件。

<script src="http://localhost.dev/public/js/test.js"></script>

这段代码对我来说很好。但我已将此匿名代码转换为命名函数addTopic。

我修改了新代码[test.js]: - : -

 function addTopics() 
 {
    alert ('hi');
    $( "#category" ).change('select',function() 
    {
        var category_id="category_id="+$("#category").val();

        $.getJSON("get_topic",category_id, function(topic)
        {
            $('#topic').empty();
            $('#topic').append("<option>--- Select Quiz Topic ---</option>");

            for(var t in topic) 
            {
                var option = $('<option />');
                option.attr('value', topic[t].id).text(topic[t].name);
                $('#topic').append(option);
            }

        });
    });
 } 

现在我在PHP页面中调用此方法: -

<select id="category" class="form-control" onchange="addTopics()" name="category">

现在新代码无效。请帮我解决这个问题。

提前致谢。

修改: -

问题范围:

我有jQuery匿名代码。这工作正常。但我想将匿名jQuery代码转换为命名jQuery函数。所以我可以调用jQuery函数,我需要调用它,而不是自动调用它。

3 个答案:

答案 0 :(得分:1)

HTML:

不要在你的HTML中应用事件处理程序..这只是不好的做法。而只是使用你需要的东西

<select id="category" class="form-control" name="category">

JS:

在您的javascript中应用您的事件处理程序,如下所示:

$("#category").change('select', addTopics);

并将您的函数单独定义为命名函数。事件处理程序现在会调用它。

function addTopics() 
 {
    alert('hi');
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Quiz Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
} 

答案 1 :(得分:0)

不,你不想在select元素的更改时调用它。你想在页面加载时调用它:

<script src="… jQuery …"></script>
<script src="http://localhost.dev/public/js/test.js"></script>
<script type="text/javascript">
    jQuery(document).ready(addTopics);
</script>

如果您想在该元素的更改侦听器中放置任何内容,则只需要function() { var category_id=…; $.getJSON("get_topic",…); }部分。但是你shouldn't use that anyway

答案 2 :(得分:0)

谢谢大家的帮助......我的问题解决了。

 function addTopics() 
 {
   var category_id="category_id="+$("#category").val();

   $.getJSON("get_topic",category_id, function(topic)
   {
    $('#topic').empty();
    $('#topic').append("<option>--- Select Quiz Topic ---</option>");

    for(var t in topic) 
    {
        var option = $('<option />');
        option.attr('value', topic[t].id).text(topic[t].name);
        $('#topic').append(option);
    }

});
} 

如果这种方法有误,请指导我。等待某人的建议。

顺便说一下再次感谢所有人:..)

快乐的编码。