Javascript JS foreach-mouseenter事件不工作

您好，我正在尝试创建响应性布局，当数据加载时，该布局会发生变化

这是我的密码：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty">
        <h2><span data-bind="text: name"> </span></h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

我认为问题在于敲除绑定及其UI刷新。“我的布局”使用“我的数据”正确呈现，但“页面源”保持不变，如下所示：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty">
        <h2><span data-bind="text: name"> </span></h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

我有很多函数调用： 当enter:mouseEnter和mouseOut被调用时。 当leave mouseOut被调用2次时

与代表们一起：

$("div").delegate("#oferty.col-md-4", "mouseenter", function () {   
    console.log("delegate in"); 
});
$("div").delegate("#oferty.col-md-4", "mouseleave", function () {
    console.log("delegate out");
}); 

输入时我有4个呼叫结束离开时的4个呼叫

以下是我的FullViewModel：

var infowindow = new google.maps.InfoWindow({ content: "empty" });
var markers = [];
var rows = [];

function point(name, lat, long) {
    var self = this;
    self.name = name;
    self.lat = lat;
    self.long = long;

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    title: name,
    map: map,
    draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function () {
    console.log(marker.title);
    infowindow.setContent(marker.title);
    infowindow.open(map, marker);

}.bind(this)); 
google.maps.event.addListener(marker, 'click', function () {
    alert(marker.title);
    console.log(marker.title);

}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
    infowindow.close();
}.bind(this));
markers.push(marker);
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('Test1', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])    
};

$("#oferty.col-md-4")
    .mouseenter(function () {
        console.log("wszedlem");
        var poszukiwane=$(this).attr("data-name");
        //showMarkerFromMenu($(this).attr("data-name"));
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].title == poszukiwane) {
                infowindow.setContent(markers[i].title);
                infowindow.open(map, markers[i]);
            }
        }


    })
.mouseleave(function () {
    infowindow.close();
});
function mouseEnter()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}
function mouseOut()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}
/*
$("div").delegate("#oferty.col-md-4", "mouseenter", function () {   
    console.log("delegate in"); 
});
$("div").delegate("#oferty.col-md-4", "mouseleave", function () {
    console.log("delegate out");
});   */
ko.applyBindings(viewModel);

var infowindow=new google.maps.infowindow（{content:“empty”}）；
var标记=[]；
var行=[]；
功能点（名称、横向、纵向）{
var self=这个；
self.name=名称；
self.lat=lat；
self.long=long；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（lat，long），
标题：姓名，
地图：地图，
德拉格布尔：是的
});
google.maps.event.addListener（标记'mouseover'，函数（）{
console.log（marker.title）；
infowindow.setContent（marker.title）；
信息窗口。打开（地图、标记）；
}.约束（这个）；
google.maps.event.addListener（标记，'click'，函数（）{
警报（标记、标题）；
console.log（marker.title）；
}.约束（这个）；
google.maps.event.addListener（标记'mouseout'，函数（）{
infowindow.close（）；
}.约束（这个）；
标记器。推（标记器）；
}
var map=new google.maps.map（document.getElementById（'googleMap'）{
缩放：5，
中心：新google.maps.LatLng（55,11），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var viewModel={
积分：ko.Array([
新点（'Test1'，55，11），
新点（'Test2'，56，12），
新点（'Test3'，57，13）]）
};
$（“#of erty.col-md-4”）
.mouseenter（函数（）{
console.log（“wszedlem”）；
var poszukiwane=$（this.attr（“数据名”）；
//showMarkerFromMenu（$（this.attr（“数据名”））；
对于（var i=0；i

几乎所有的布局：

<div class="row">
    <div class="col-md-4">
        <section id="Map" class="fixed-location">
            <div id="googleMap" style="width:350px;height:600px;"></div>
        </section>
  </div> 
  <div class="col-md-8">
        <div class="row" data-bind="foreach: points">
            <div class="col-md-4" id="oferty"
                 data-bind="event: { mouseenter: mouseEnter, mouseout: mouseOut}, name: name">
                <h2><span data-bind="text: name"> </span></h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4" data-lat="50.12" data-lng="19.10" data-name="Test1" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
            <div class="col-md-4" data-lat="50.13" data-lng="19.10" data-name="Test2" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
            <div class="col-md-4" data-lat="50.14" data-lng="19.10" data-name="Test3" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
        </div>
  </div>
<div>

NuGet是一个免费的VisualStudio扩展，可以轻松地在VisualStudio项目中添加、删除和更新库和工具


获取更多库
NuGet是一个免费的VisualStudio扩展，可以轻松地在VisualStudio项目中添加、删除和更新库和工具


获取更多库
NuGet是一个免费的VisualStudio扩展，可以轻松地在VisualStudio项目中添加、删除和更新库和工具


获取更多库
NuGet是一个免费的VisualStudio扩展，可以轻松地在VisualStudio项目中添加、删除和更新库和工具

---

脚本等也包括在内，但我没有粘贴这段代码

似乎您正在尝试在初始化viewModel之前添加mouseenter/mouseleave处理程序

您可以尝试以下解决方案：

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

$("#oferty.col-md-4").mouseenter(function () {
    console.log("wszedlem");        
}).mouseleave(function () {
    console.log("wyszedłem");
});

但最好的方法是使用淘汰事件绑定：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty" 
       data-bind="event: { mouseenter: mouseEnter, mouseout: mouseOut}">
        <!-- Your layout -->
    </div>
</div>

应该是这样的:

data-bind="text: Name"

更新2:

您没有删除ViewModel中的jQuery事件处理程序。删除它们（从第$行（“of erty.col-md-4”）开始）。只留下鼠标，鼠标离开功能

更新3:

好的，我已经调试了你的代码，发现了很多bug。多次mouseenter/mouseout调用的原因是html元素，您在其中添加了事件绑定。MouseEnter/MouseLeave事件调用每个子html元素，因此，正如您为div定义的那样，它在您输入/离开子元素时调用

我创建了一个简单的演示，

请试试这个

$("#oferty.col-md-4").on("mouseenter",function(){
  console.log("wszedlem");        
}).on("mouseleave",function(){
console.log("wyszedłem");
})

---

使用委托事件句柄sthx。你的代码几乎解决了我一半的问题。我更新了我的问题。请在下次，首先接受您原来的问题，然后创建一个新的。不要在原始问题中添加新问题！关于其他问题，您是否同时添加了绑定和jquery事件处理程序？否。我首先检查了委托。然后评论他们。然后是事件bindigns。当输入mouseEnter时删除相同的efect，当离开mouseOut x2时调用mouseOut

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty" 
       data-bind="event: { mouseenter: mouseEnter, mouseout: mouseOut}">
        <!-- Your layout -->
    </div>
</div>

data-name="Test1" 

data-bind="text: Name"

$("#oferty.col-md-4").on("mouseenter",function(){
  console.log("wszedlem");        
}).on("mouseleave",function(){
console.log("wyszedłem");
})