Question

我的应用程序中有两个CodeIgniter视图，两个视图都有一个文本字段。我的问题是，我的jQuery代码仅在我的应用程序加载时在第一个CodeIgniter视图上工作。当我的应用程序显示第二个视图时，我的jQuery代码不起作用。

$(document).ready(function() {
    $(".input-field").attr("value","I'm looking for...");
    var text = "I'm looking for...";
    $(".input-field").focus(function() {
        $(this).addClass("active");
        if($(this).attr("value") == text) $(this).attr("value", "");
    });
    $(".input-field").blur(function() {
        $(this).removeClass("active");
        if($(this).attr("value") == "") $(this).attr("value", text);
    });
});

以下是我在两个CodeIgniter视图的head部分中的脚本标记。此外，两个视图都具有相同的类名input-field。为什么我的jQuery不适用于第二个视图？

<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>

Answer 1

您需要使用事件委派，因为您似乎正在处理动态元素

事件更改为focusin和focusout，因为根据定义，焦点和模糊不会冒泡

$(document).ready(function () {
    $(".input-field").attr("value", "I'm looking for...");

    var text = "I'm looking for...";

    $(document).on('focusin', ".input-field", function () {
        $(this).addClass("active");
        if ($(this).attr("value") == text) $(this).attr("value", "");
    });
    $(document).on('focusout', ".input-field", function () {
        $(this).removeClass("active");
        if ($(this).attr("value") == "") $(this).attr("value", text);
    });
});

jQuery只适用于第一个CodeIgniter视图，而不是第二个，为什么？

1 个答案: