标签: jquery-events

[编辑:对于那些已经回答的人 - 抱歉 - 在我睡眠不足的状态下,我忘记了这种特殊情况是YouTube电影,而不是JW FLV播放器.我可以看到有更多关于与YouTube电影互动的文档,所以我会追求这一点,但也欢迎更多信息]

我正在使用jQuery循环插件(http://malsup.com/jquery/cycle/)在正在轮换的div集合中使用嵌入式YouTube视频.

当我点击其中一部电影开始播放时,我希望循环停止,但我无法弄清楚如何将jQuery事件处理程序附加到播放器对象.

这是我当前代码的样子(你不能直接用jQuery选择一个对象标签,所以我选择父div,然后将object元素作为第一个子元素):

$("div.feature-player").children(":first").click(function(event) {
   $('#features').cycle('stop');
});

但这并不能解决问题.我不是Flash的作者,所以我对ActionScript并不熟悉,之前我从未在JavaScript和Flash电影之间建立过互动.

谢谢你的帮助!

- 保罗

我希望能够将事件绑定到高图表中的轴,因此我可以在UI中为它们公开一些选项(轴间隔,文本格式,网格线等)

似乎不是在highcharts中这样做的方法.到目前为止,当我点击标签时,我可以让它进行我的出价,但是当我点击标签之间的空格时,我不能这样做.请参阅此处的小提琴,版本2.2.4:http://jsfiddle.net/gW4p6/174/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        marginRight: 80 // like left
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{
          lineWidth: 1,
          title: {
              text: 'Secondary Axis'
          }
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

var clearSelection = function() { $('.highcharts-axis').css('stroke', ''); };

$('.highcharts-axis').click(function(event) {
    clearSelection();
    $(this).css('stroke', 'green');
    return false;
}); …

我正在编写一个小部件模板，它将包含在安装它的页面中。

人们可能会在一个页面中安装多个相同类型的小部件，因此我的模板可能会被包含多次。

现在我已经写了一些JavaScript来初始化小部件，你知道，点击和悬停。

我的问题是这些<script>被执行多次，例如，当我单击某物时，有界函数被执行多次。

解决这个问题的最佳方法是什么？

编辑：
顺便说一句，我正在使用Mako模板引擎，并且我尝试使用c变量来存储布尔标志，但似乎c每次都会被覆盖。

为什么这不起作用？标签位于.item父级内.我不想把它放在块元素之外,因为它不会有效.

所以我试图模拟标签点击:

$(".item").click(function(){
    $(this).find("label").click();
});

编辑:它应该触发标签并检查收音机.

<script type="text/javascript">
    $(document).ready(function () {
        $(".item").click(function() {
            $(this).find("label").click();
        });
    }); 
</script>


<div class="item">
    <h4>Item</h4>
    <ul>                
        <li>Description</li>
    </ul>
     <div class="radio-container">
        <div class="radio-stack">
            <input type="radio" class="styled" id="item1">
        </div>
        <label for="item1">$100</label>
    </div>
</div>

我有一个现有的事件重页,我试图添加先行支持.预先输出功能可以根据需要运行,除了它似乎只能一次附加到输入项目.

问题是,为简单起见,在某些操作之后,现有页面会删除附加到特定输入的所有事件 $('input').off(),然后根据新上下文重新附加新事件处理程序.

这导致了一个问题,即重新连接的先行功能似乎永远不会触发.(这里讨论了一个类似但不同的问题:使用post响应更新Bootstrap的typeahead数据源时遇到麻烦但是这里没有相关性,因为我可以更新源代码 - 我只是不能让类型提前触发无论如何我尝试了什么)

编辑:为了澄清 - 更改源(如在链接的问题中)不是问题 - 实际页面上的源是一个向服务器发出请求的js函数.问题是调用.off()似乎永久地破坏了类型,并且我不能删除调用.off()而不必重写大部分页面....下面的代码和jsfiddle只是我可以设计的最短代码来演示问题

这里有一个工作jsfiddle记录问题:http: //jsfiddle.net/hz5P3/8/

供将来参考,完整代码如下.简要说明:input.workstext_field只有一个先行声明,工作正常.该input.no_works有一个称为预输入功能,则已经$('.no_works').off()呼吁取消对这个输入的所有事件.此功能的重新连接类型无法完成.

有没有办法按预期第二次调用预先输入工作？

谢谢

HTML

<div class="container">
    <div class="hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        
         <p>this is a test typeahead that will work</p>         
        <input type="text" class="works" style="margin: 0 auto;">
        
        <p>this is a test typeahead that is updated and will not work</p>
        <input type="text" class="no_works" style="margin: 0 auto;">
    </div>
</diV>?

使用Javascript

$('.no_works').typeahead({ …

我正在努力寻找悬挂事件的最有效方式.

让我们想象我们有这样的结构:

<ul>
    <li> 1st li </li>
    ...
    <li> 99999th li </li>
<ul>

所以,我们有大约10000个li元素,我们想要为所有这些元素添加事件监听器,假设我们也可以使用jQuery.

首先想到的

<li onclick="console.log(this)" >...</li>

这个解决方案的一个不好的部分 - 我们增加了html标记的大小,因为总是重复onlick

第二个念头

$('ul li').on('click', function(){ 
    console.log(this)
})

当然这个解决方案不是一个选项,因为我们添加了10000个事件监听器,显然不利于性能.

第三个想法,事件授权

$('ul').on('click', 'li', function(){
    console.log(this)
})

看起来非常好,对我来说,我们只使用一个事件监听器,而不是删除html标记,它可以正常工作.

所以,我问这个问题,因为有时我会查看不同网站的来源,其中很大一部分使用第一种方式.为什么？第一种方式有一些优势？

我想这可能是因为抓住动态添加的元素到页面更容易,但可能有些东西我不知道？

我有一个非常适合我的 jQuery 日期选择器，除了当我通过 ajax 刷新内容时，我丢失了日期选择器。据我所知，我应该使用 jQueryon()将其绑定到输入，但我似乎无法找到将其绑定到的正确事件。

第一次有效，但在后续刷新时无效：

$("[id^=startPicker]").datetimepicker({
        showOn: "button",
        buttonImage: "/img/calendar_icon.png",
        buttonImageOnly: true,
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:mm tt',
        stepMinute: 1,
        onClose: function (dateText, inst) {

            var selectedDate = $(this).datepicker("getDate"); //Date object

            $.ajax({
                url: "/url",
                dataType: "json",
                method: 'post',
                data: {
                    value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
                },
                beforeSend: function () {
                    $("#loading").fadeIn();
                },
                success: function (data, textStatus) {
                    $("#content").html(data);
                },
                complete: function () {
                    $("#loading").fadeOut();
                }
            });
        }
    });

第一次或后续刷新时不绑定：

$('#content').on('ready', "[id^=startPicker]", function () {
        $(this).datetimepicker({ …

我被要求为我们的页面网站实现ctrl + mousewheel事件,以便在用户放大或缩小时更改图像偏移.我发现这个旧答案使用javascript覆盖浏览器CTRL +(WHEEL)SCROLL,我试图做同样的事情.我为实现下载了jQuery Mouse Wheel插件,这是我的代码:

var isCtrl = false;  
       $(document).on('keydown keyup', function(e) {
            if (e.which === 17) {
                isCtrl = e.type === 'keydown' ? true : false;
            }
        }).on('mousewheel', function(e, delta) { // `delta` will be the distance that the page would have scrolled;
            // might be useful for increasing the SVG size, might not
            if (isCtrl) {
                e.preventDefault();
                alert('wheel');
            }
        });

事件可以单独运行,但如果我按住CTRL按钮并转动鼠标,则轮子事件不会触发.有没有人有更好的解决方案,或者我做错了什么？感谢帮助

我正在使用 JavaScript 和 JQuery，有一个来自 jquery.js 的点击事件参考，

在这里，我试图覆盖点击事件，但没有发生。即使被覆盖仍然是整流罩旧的不是新的。有没有办法根据优先级加载事件？

我有一个父div,高度= 100px,小于子div,高度= 200px.

当我在父div上附加jquery mouseenter时,即使我将指针悬停在child上,事件也会触发(将鼠标悬停在扩展父级高度的child部分上).

有谁能解释一下？

$(document).ready(function() {
		$(".parent").mouseover(function(e) {
			console.log(e.target);
		});
		$(".child").mouseover(function(e) {
			console.log(e.target);
		});
		$(".grandchild").mouseover(function(e) {
			console.log(e.target);
		});
	});

.parent {
			background-color: green;
			height: 50px;
		}
		.child {
			background-color: red;
			height: 100px;
		}
		.grandchild {
			background-color: blue;
			height: 200px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
		<div class="child">
			<div class="grandchild">
				Test
			</div>
		</div>
	</div>

- 更新 - 起初我不清楚究竟是什么问题.现在我想我明白了(我更新了代码).

假设我们有一个父div width=100px和height=100px.
然后我们有一个孩子div width=200px和height=200px(比父母更大的面积).
当我将鼠标悬停在子节点上(但尚未悬停在父节点上)时,浏览器会计算指针也在父节点上,尽管它没有.
因此,如果我在子项和父项上都有一个处理程序,它们将在我仅输入子div时触发.

谢谢.