标签: javascript-events

使用javascript设置<a>的onclick

我想更改div中的所有链接,以便它们不再引用页面,但在单击时运行javascript函数.为此,我写了这个函数:

function buildPageInDiv(htmlString){
    console.log(typeof htmlString);
    $div = $(htmlString).children("div#myDiv");
    $div.children("a").each(function(i, element){toJavascriptLinks(element)});
    document.getElementById("targetDiv").innerHTML = $div[0].innerHTML;
}
Run Code Online (Sandbox Code Playgroud)

调用此函数:

function toJavascriptLinks(element){
    element.href="#";
    element.onclick     = function(){console.log('Yeah!')};
    console.log(element);
}
Run Code Online (Sandbox Code Playgroud)

现在,当我运行'buildPageInDiv'时,在控制台上打印'string',所有"href"都变为"#",并且对于div中的每一个,控制台都会打印元素:

 <a href="#">
Run Code Online (Sandbox Code Playgroud)

这里没有onclick的迹象,点击链接在控制台上没有显示任何内容.

我在这里错过了什么?

编辑:

我在错误的地方寻找.问题是我在将innerHTML附加到'targetDiv'之前运行'toJavascriptLinks(element)'.这对于href属性来说没有问题,但它适用于onclick属性.解决方案只是先将它放在'targetDiv'中,然后在'targetDiv'上运行'toJavascriptLinks(element)':

function buildPageInDiv(htmlString){
    console.log(typeof htmlString);
    var content = $(htmlString).children("div#myDiv")[0].innerHTML;
    document.getElementById("targetDiv").innerHTML = content;
    $("div#targetDiv").children("a").each(function(i, element) toJavascriptLinks(element)});
}
Run Code Online (Sandbox Code Playgroud)

虽然问题不在我最初发布的代码中,但下面的综合答案使我得到了解决方案.

javascript jquery onclick javascript-events

3
推荐指数
1
解决办法
9444
查看次数

jQuery - 如何在变量中存储事件处理程序并在以后将其绑定到对象?

基本上我有一个"删除所选项"按钮,只要没有选中复选框就会被禁用.一旦用户选中了复选框,我就想将click事件处理程序绑定到此按钮.

由于用户可能会取消选中复选框并且没有选中,我想将完整的事件处理函数存储在变量中,并且只在选中复选框时将其绑定.

问题是:如何将此事件处理函数存储在变量中以最容易地将其绑定到对象?

直到现在我只使用它来取消绑定事件处理程序(已存在于此对象上),然后再次绑定它,如下所示:

$(my-selector).unbind('click', eventHandler);
$(my-selector).bind('click', eventHandler);
Run Code Online (Sandbox Code Playgroud)

......但从来没有反过来.

javascript jquery events event-handling javascript-events

3
推荐指数
1
解决办法
6634
查看次数

jquery选择器不工作,为什么?

我只是想操纵#content div中的元素,但$('#content')似乎不起作用,但在其他地方却有效!我的相关代码非常简单:

HTML

<body>
  <input type='button' value='Save design' id='save'  />
  <div id="content" style="height: 200px; width:600px;border: 1px solid black;" class='whatev'></div>
</body>
Run Code Online (Sandbox Code Playgroud)

脚本

$(document).ready(function(){   
   $('#save').click(function(e){
     alert( document.getElementById('content').id); // this works!
     alert($("#content").length); // this works! it outputs "1"
     alert($("#content").id); // this does NOT work - undefined, why?
     //end save function
   });

    $('#content').click(function(e){ 
       // do stuff // ALL of this works!
    });
});
Run Code Online (Sandbox Code Playgroud)

这就对了.如果你注意到,它确实在某些地方有效(整个点击功能完全正常),但是如果它不起作用,它奇怪地仍然存在,因为length = 1.我尝试使用上下文来搜索div,以防万一,(使用$('#content','body')),但没有用.

html jquery javascript-events selector

3
推荐指数
2
解决办法
3万
查看次数

如何在jQuery蒙版文本输入上执行.select()

我正在使用http://digitalbush.com/projects/masked-input-plugin/插件.

有一个带定义掩码的输入文本:

<input type="text" id="txtMyInput" class="FocusSense"/>
Run Code Online (Sandbox Code Playgroud)

和一个脚本:

$(document).ready(function () {
    jQuery(function ($) {            
        $("#txtMyInput").mask("?9.99");            
    });
    $(".FocusSense").focus(function () {
        this.select();
    });
})
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,我想在焦点上选择txtMyInput中的所有内容但是唉!在焦点上,蒙版出现并松散.select().

我该怎么做才能保留mask和.select()?

javascript jquery mask javascript-events masking

3
推荐指数
1
解决办法
2450
查看次数

如何使jQuery`bind`或`on`事件处理程序具有幂等性

有没有办法可以调用$(selector).bind('click', handler)或$(selector).on('click', handler)多次调用处理程序只能连接一次?

现在,我有多个具有不同成功回调的AJAX处理程序,每个回调都在页面上重新呈现一组不同的元素.理想情况下,我想将"重新连接事件"例程重构为单个函数而不是所有例程.

我现在想到的唯一方法是明确解除绑定,例如:

$(selector).off('click');
$(selector).on('click', handler);
Run Code Online (Sandbox Code Playgroud)

寻找一种自动执行此类操作的方法.

javascript jquery javascript-events idempotent

3
推荐指数
1
解决办法
697
查看次数

防止jQuery就绪处理程序触发

我有一种情况,在某种情况下,我想要任何jQuery ready处理程序绑定不会实际触发DOMContentReady事件.这些处理程序绑定在各个地方,包括各种包含文件,插件等.因此,虽然我可以在靠近页面顶部的脚本中设置某种全局变量,并且if在每个$(document).ready()绑定之前设置检查此变量的条件,但我宁愿不这样做.

理想情况下,我正在寻找两件事之一,

  • 我可以在包含之前在jQuery对象上设置的属性,它会告诉它忽略调用 .ready()
  • 我可以在DOMContentReady触发之前在内联脚本中调用文档末尾的方法取消绑定ready()处理程序.

显而易见的一个,$(document).unbind('ready')不这样做,我猜因为.ready()不是普通的事件绑定.

可以这样做吗?如果是这样,怎么样?

我有一个模糊的想法是扩展jQuery原型,并ready()用一个检查我将要引入的新属性的方法替换.那有意义吗?

javascript jquery javascript-events

3
推荐指数
1
解决办法
1570
查看次数

在javascript函数中模拟href单击?

我在jsp的遗留项目中有以下代码

   <tr>
    <th colspan="2">Customer</th>
    <td colspan="2">
      <a href="myAction.do" target="view">CustomerLink</a></td>
  </tr>
Run Code Online (Sandbox Code Playgroud)

当我们点击CustomerLink时,我希望对行为进行少许修改.我只想在点击动作之前在javascript函数中进行一些处理.我没有得到如何模拟javascript函数中的href链接行为?

我试过的: -

 <tr>
    <th colspan="2">Customer</th>
    <td colspan="2">
      <a href="javascript:customerLinkClicked('myAction.do')" target="view">CustomerLink</a></td>
 </tr>
Run Code Online (Sandbox Code Playgroud)

// javascript函数

    function customerLinkClicked(path)
    {

        // simulate the href link behaviour, not sure how to do this


    }
Run Code Online (Sandbox Code Playgroud)

javascript href javascript-events java-ee

3
推荐指数
1
解决办法
1万
查看次数

如何在无限滚动中避免多个JavaScript函数调用

我正在使用此Java Script函数来创建具有Infinite Scroll功能的JSP页面.

<script language="javascript" type="text/javascript">

var count = 0;

window.onload = loadSubPage;

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    alert("load appLeadershipSubView function calling");
        loadSubPage();
    }
});

function loadSubPage()
{
    alert("load appLeadershipSubView called");
        $.ajax({
        cache: false,
        url: 'appLeadershipSubView.do?count=' + count,
        async : true,
        beforeSend: function(){
        },
        success: function(html){
            alert("success event");
            $('#mainDiv').append(html);
            count++;
        },
        complete: function(){
        }
    }
    );
} 

</script> 
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,我正在调用loadSubPage函数将'appLeadershipSubView'页面中的html内容追加到'#mainDiv'中.并且还在页面Load事件中调用loadSubPage.

问题是,当我向下滚动时,它会对loadSubPage函数进行多次(有时是2次)调用,并将重复数据附加到div中.

由于我是JSP和Javascript的新手,我无法在这里找出问题所在.你能指点我这里的问题吗?

javascript ajax jquery jsp javascript-events

3
推荐指数
1
解决办法
3540
查看次数

Javascript IE错误:'target'为null或不是对象

document.onkeydown = function(event) {
    var tagName = event.target.tagName;
    if (tagName != 'INPUT' && tagName != 'TEXTAREA' && !event.alt && event.control) {

        if (event.ctrlKey && event.keyCode == 37) {
            if (_this.currentPage > 1) {
                window.location.href = _this.baseUrl.replace(/%page%/i, _this.currentPage + 1);
            }
        } else if (event.ctrlKey && event.keyCode == 39) {
            if (_this.currentPage < _this.pagesTotal) {
                window.location.href = _this.baseUrl.replace(/%page%/i, _this.currentPage - 1);
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这只在IE 8中出现错误:

'target'为null或不是对象

为那条线 var tagName = event.target.tagName;

如何解决这个问题.按Ctrl或箭头按钮时发生错误.

javascript internet-explorer javascript-events

3
推荐指数
1
解决办法
6918
查看次数

从键盘输入后启用/禁用textarea

我有一个textarea默认禁用.然后按'编辑'我从用户那里得到一些输入.如果它有效,我想启用textarea.这是我现在的代码:

<textarea name="comment" cols="5" rows="2" disabled="true"><%= $tmp_com %></textarea>
<a href="javascript:validateUser()">Edit</a>

function validateUser(){
var name=prompt("Please enter the password");

    if (name=="1234")
    {
       document.getElementByName("comment").disabled="false";
    }
}
Run Code Online (Sandbox Code Playgroud)

html javascript javascript-events

3
推荐指数
2
解决办法
3万
查看次数