Question

当我转到其他页面时，如何触发javascript（或jquery）事件？

例如：

我在index.html
在index.html，我点击了contact.html链接;
当我访问contact.html页面时，我需要触发一个事件

感谢您的关注

修改

我会尝试以其他方式解释：

我正在使用RubyOnRails。我有一个页面，我可以添加联系人。有很多字段但是在这个例子中我只使用两个：

<select name='type' id='type_select'>
    <option value='0'></option>
    <option value='1'>Home</option>
    <option value='2'>Work</option>
</select>
<input type="text" name="contact_name" id="contact_name_input">

在我的Javascript上我有：

// this only works if I press CTRL+F5 to refreash the page
$(document).ready(function(){
    $("#contact_name_input").hide();
});
// This Works fine
$('#type_select').change(function(){
    if ($(this).val() == 1 || $(this).val() == 2){
        $("#contact_name_input").show();
    } else {
        $("#contact_name_input").hide();
    }
});

换句话说，我需要的是在用户访问页面时隐藏输入字段，并仅在他选择有效类型时显示输入字段。

我希望更清楚

感谢您的关注

Answer 1

您似乎希望在目标页面上触发事件（在用户点击链接后）并将其带到目标页面。如果是这种情况，并且您想要触发特定事件，正如其他人所建议的那样，您的第一个入口点可能是新页面的document.ready，您可以使用查询字符串来指定更具体的事件。

在Index.html上

<a href="contact.html?e=1">Contact</a>

在Contact.html上

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

        $(document).bind("myCustomEvent", function(e, data) {
            alert("Weee, you triggered event id: " + data.EventId + "!");
        });

        var eventId = getParameterByName('e');  // Load the query string specified by the previous page's link
        if(eventId == 1) {
            $(document).trigger("myCustomEvent", {EventId: eventId});
        } else {
        } // end if/else
    });

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>

信用 - 从这里无耻地使用Javascript QueryString函数： How can I get query string values in JavaScript?

发布解决方案由@xDaevax在聊天中提供：

在$（document）.ready（）上使用JQuery;要隐藏输入，您有时会看到闪烁。您可能需要考虑在输入中添加一些CSS来隐藏它然后，当你来到页面时它总是被隐藏。当你使用JQuery show（）和hide（）时，他们会将“display”css属性从“display：block”更改为“display：none”，具体取决于你是调用show（）还是hide（）所以，在你的javascript中，你可以尝试：

$("#type_select").change(function(e) {
    var selectedValue = $(this).val();
    if(selectedValue <= 0) {
        $("#contact_name_input").hide();
    } else {
        $("#contact_name_input").show();
    }
});

它对我有用

如何在用户从另一个页面导航到该页面后触发目标页面上的JavaScript事件

1 个答案: