需要为“onload”调用脚本也不仅仅是“模糊” [英] need the script to be called for "onload" too not just on "blur"

问题描述

代码是：

$(document).ready(function () {
$('#url0, #url1, #url2, #url3, #url4, #url5, #url6, #url7, #url8, #url9, #url10').each(function(index, element) {
    $(element).blur(function() {
        var vals = this.value.split(/\s+/);
        var $container = $(this).hide().prev().show().empty();

        $.each(vals, function(i, val) {
            if (i > 0) {
                $("<span> </span>").appendTo($container);
            }

            $("<a />")
                .html(val)
                .attr('href',/^https?:\/\//.test(val) ? val : 'http://' + val)
                .appendTo($container)
                .click(handleClickEvent);
        });
    });
}).trigger('blur');

// ms to wait for a doubleclick
var doubleClickThreshold = 300;
// timeout container
var clickTimeout;

$('.aCustomDiv a').click(handleClickEvent);
$('.aCustomDiv').click(handleDivClick);

function handleClickEvent(e) {
    var that = this;
    var event;

    if (clickTimeout) {
        try {
 clearTimeout(clickTimeout);
        } catch(x) {};

        clickTimeout = null;
        handleDoubleClick.call(that, e);
        return false;
    }

    clickTimeout = setTimeout(function() {
        clickTimeout = null;
        handleClick.call(that, event);
    }, doubleClickThreshold);

    return false;
}

function handleDivClick(e) {
    var $this = $(this);

    $this.parent()
        .find('input,textarea')
        .show()
        .focus();
    $this.hide();
}

function handleDoubleClick(e) {
    var $this = $(this).parent();
 $this.parent()
        .find('input,textarea')
        //.val($a.text())
        .show()
        .focus();
    $this.hide();
}

function handleClick(e) {
    window.open(this.href, '_blank')
}
});

HTML CODE：

HTML CODE:

<div style="padding:0 !important;margin-top:8px !important;">
<div class="aCustomDiv" style="padding: 0px ! important; display: block;">
    <a href="http://www.google.com">www.google.com</a><span></span><a href="http://www.facebook.com">www.facebook.com</a><span></span><a href="http://www.wikipedia.org">www.wikipedia.org</a>
</div>
<input type="text" value="www.google.com www.facebook.com www.wikipedia.org" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display: none;" readonly="readonly">

此脚本执行以下操作：

this script does the following:

1. 将文本转换为这些ID的url（url0 ...）


2. 双击该链接使其可编辑


3. 点击div区域，在链接旁边使其可编辑


4. 点击链接=>转到页面

1. converts the text to url for those ids (url0 ...)
2. double click on the link makes it editable
3. one click on the div area, next to link makes it editable
4. one click on the link => goes to the page

我的问题：由于某些原因我不知道，点击链接就没了不要去页面但是编辑它，只有第一次，之后效果很好，所以我想第一个函数也被调用，而不仅仅是在模糊时。我怎么能这样做？

my problem : for some reason i don't know, the one click on the link doesn't go to the page but edits it, only the FIRST time , after that works great, so i want the first function to be called also onload not only when blur. how can i do this ?

推荐答案

至于在启动时加载，javascript是单线程的，所以只需触发一个方法就行了你保持秩序井井有条......（只需添加几个parens）。但是因为你试图访问DOM，你想要等待元素可用（否则你将从选择器中得不到任何东西）。

As far as loading on startup, javascript is single threaded so just firing a method will work if you keep things in order (... just add a couple of parens). But because you are trying to access the DOM you do want to wait for the elements to be available (otherwise you will get nothing back from a selector).

但你做已经：

$(document).ready( function(){} );

这正是你所要求的，它还有一个简写：

Which does exactly what you are asking for, it also has a shorthand of:

$( function(){} );

所以我不得不同意rodneyrehm，这可能是你和其他js发生的一些碰撞你的页面。您可能希望在某个命名空间中将其封装一下，以确保不是问题。

So I would have to agree with rodneyrehm that is it probably some collision that you have with other js on your page. You might want to encapsulate it a bit in some namespace to make sure that is the not the problem.

我写了一个快速版本，应该让您继续如果您仍然遇到问题，请先着手： http://jsfiddle.net/scispear/dUWwB/ 。我将'updateURL'方法拉出来，万一你的ajax调用（你提到）只是预先填充字段（这样你也可以传入值）。

I wrote up a quick version that should get your on your way as a starting point if you are still having problems: http://jsfiddle.net/scispear/dUWwB/. I pulled the 'updateURL ' method out in case your ajax call (you mentioned) was just pre-populating the field (that way you could pass in the value also).

它也适用于多个输入/显示，我认为你的目的不是100％确定。

It also works with multiple inputs/displays which is what I think you were going for was not 100% sure.

这篇关于需要为“onload”调用脚本也不仅仅是“模糊”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！