0

我的应用程序中有两个 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 视图头部的脚本标签。此外，两个视图具有相同的类名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>
4

1 回答 1

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);
    });
});
于 2013-09-04T00:19:08.293 回答